Adjusted

src/components/generic/Breadcrumb/AppBreadcrumb.jsx

@@ -66,16 +66,14 @@ const AppBreadcrumb = ({ items = [] }) => {
             <span key={index} className="flex items-center gap-1.5">
               <BreadcrumbItem>
                 {isLast ? (
-                  // Current page — no interaction
+                  <BreadcrumbPage className="flex items-center gap-2 max-w-[200px] truncate">
-                  <BreadcrumbPage className="flex items-center gap-2">
                     {item.icon}
-                    {item.label}
+                    <span className="truncate">{item.label}</span>
                   </BreadcrumbPage>
                 ) : (
-                  // Clickable link
                   <BreadcrumbLink asChild>
                     <div
-                      className="flex items-center gap-2 select-none cursor-pointer"
+                      className="flex items-center gap-2 select-none cursor-pointer max-w-[200px]"
                       onClick={(e) => {
                         if (item.onClick) {
                           item.onClick(e, navigate);
@@ -86,7 +84,7 @@ const AppBreadcrumb = ({ items = [] }) => {
                       }}
                     >
                       {item.icon}
-                      <span>{item.label}</span>
+                      <span className="truncate">{item.label}</span>
                     </div>
                   </BreadcrumbLink>
                 )}

src/contexts/AdminCoursesContext.jsx

@@ -572,10 +572,10 @@ export function CoursesProvider({ children }) {
     [request],
   );
 
-  const deleteLesson = useCallback(
+  const archiveLesson = useCallback(
-    (courseId, unitId, lessonId, deletedBy) =>
+    (courseId, unitId, lessonId) =>
       request(async () => {
-        const { data } = await api.delete(`${BASE}/${courseId}/units/${unitId}/lessons/${lessonId}`, { data: { deletedBy } });
+        const { data } = await api.delete(`${BASE}/${courseId}/units/${unitId}/lessons/${lessonId}`);
         setLessons((prev) => prev.filter((l) => l.lesson_id !== lessonId));
         setLesson((prev) => (prev?.lesson_id === lessonId ? null : prev));
         toast.success("Lesson archived.");
@@ -584,10 +584,10 @@ export function CoursesProvider({ children }) {
     [request],
   );
 
-  const bulkArchiveLessons = useCallback(
+  const archiveLessons = useCallback(
-    (courseId, unitId, ids, deletedBy) =>
+    (courseId, unitId, { ids }) =>
       request(async () => {
-        const { data } = await api.delete(`${BASE}/${courseId}/units/${unitId}/lessons/bulk`, { data: { ids, deletedBy } });
+        const { data } = await api.delete(`${BASE}/${courseId}/units/${unitId}/lessons/bulk`, { data: { ids } });
         setLessons((prev) => prev.filter((l) => !ids.includes(l.lesson_id)));
         toast.success("Lessons archived.");
         return data;
@@ -615,9 +615,9 @@ export function CoursesProvider({ children }) {
   );
 
   const restoreLesson = useCallback(
-    (courseId, unitId, lessonId, restoredBy) =>
+    (courseId, unitId, lessonId) =>
       request(async () => {
-        const { data } = await api.patch(`${BASE}/${courseId}/units/${unitId}/lessons/${lessonId}/restore`, { restoredBy });
+        const { data } = await api.patch(`${BASE}/${courseId}/units/${unitId}/lessons/${lessonId}/restore`);
         const result = data?.data?.data ?? null;
         if (result) {
           setLessons((prev) => prev.filter((l) => l.lesson_id !== lessonId));
@@ -628,10 +628,10 @@ export function CoursesProvider({ children }) {
     [request],
   );
 
-  const bulkRestoreLessons = useCallback(
+  const restoreLessons = useCallback(
-    (courseId, unitId, ids, restoredBy) =>
+    (courseId, unitId, { ids }) =>
       request(async () => {
-        const { data } = await api.patch(`${BASE}/${courseId}/units/${unitId}/lessons/restore/bulk`, { ids, restoredBy });
+        const { data } = await api.patch(`${BASE}/${courseId}/units/${unitId}/lessons/restore/bulk`, { ids });
         setLessons((prev) => prev.filter((l) => !ids.includes(l.lesson_id)));
         toast.success("Lessons restored.");
         return data;
@@ -963,14 +963,14 @@ export function CoursesProvider({ children }) {
       fetchLesson,
       createLesson,
       updateLesson,
-      deleteLesson,
+      archiveLesson,
-      bulkArchiveLessons,
+      archiveLessons,
 
       // ── lesson archives & restore ──────────────────────────────────────────
       fetchArchivedLessons,
       fetchArchivedLesson,
       restoreLesson,
-      bulkRestoreLessons,
+      restoreLessons,
 
       // ── lesson page ────────────────────────────────────────────────────────
       fetchLessonPage,

src/modules/admin/components/courses/ArchivedLessonsTable.jsx

@@ -0,0 +1,141 @@
+import { useMemo, useRef, useState, useEffect, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+
+import DataTable from "@/components/generic/Table/DataTable";
+import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
+import { RestoreDialog } from "@/components/generic/Dialogs/RestoreDialog";
+
+import { buildDataColumns, columnPinning } from "../../config/courses/lessons/archive/columns.config";
+import { buildToolbarActions } from "../../config/courses/lessons/archive/toolbar.config";
+import { buildSelectionActions } from "../../config/courses/lessons/archive/selection.config";
+import { buildRowActions } from "../../config/courses/lessons/archive/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+
+export default function ArchivedLessonsTable({ courseId, unitId }) {
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [restoreIds, setRestoreIds] = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters: () => [],
+        getSort: () => [],
+        resetSelection: () => { },
+        setFilters: () => { },
+    });
+
+    const navigate = useNavigate();
+
+    const {
+        course, unit, lessons, attributes, pagination, setPagination, loading,
+        fetchArchivedLessons, restoreLesson, restoreLessons, fetchLessonFieldValues
+    } = useCourses();
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    const exportConfig = {
+        allData: lessons,
+        attributes,
+        filename: `${getTimestamp()}_${course?.title}_${unit?.title}_Lessons`,
+        sheetName: "Archived Lessons",
+    };
+
+    const handleFetch = useCallback(
+        (params) => fetchArchivedLessons(courseId, unitId, params),
+        [courseId, unitId]
+    );
+
+    const rowActions = useMemo(() => buildRowActions({
+        navigate,
+        onRestore: (row) => setRestoreTarget(row),
+    }), [courseId, unitId]);
+
+    const toolbarActions = buildToolbarActions({
+        fetchArchivedLessons: (params) => fetchArchivedLessons(courseId, unitId, params),
+        pagination,
+        exportConfig,
+        navigate,
+        courseId,
+        unitId,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort: () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        restoreLesson: (row) => setRestoreTarget(row),  // single
+        restoreLessons: (ids) => setRestoreIds(ids),      // bulk
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions),
+        [attributes, rowActions]
+    );
+
+    const handleRestoreSuccess = () => {
+        setRestoreTarget(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedLessons(courseId, unitId, { page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    return (
+        <>
+            <DataTable
+                title="Archived Lessons"
+                data={lessons}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={handleFetch}
+                onFetchFilterData={(field) => fetchLessonFieldValues(courseId, unitId, field)}
+                onRefsReady={handleRefsReady}
+                renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
+                    <FilterSheet
+                        open={open}
+                        onOpenChange={onOpenChange}
+                        column={column}
+                        attr={attr}
+                        data={data}
+                        loading={loading}
+                    />
+                )}
+                columnPinning={columnPinning}
+                toolbarActions={toolbarActions}
+                selectionActions={selectionActions}
+                recordLabel="lesson"
+                emptyMessage="No lessons found."
+            />
+
+            {/* Single restore */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Lesson"
+                getName={(c) => c?.title}
+                onRestore={(c) => restoreLesson(courseId, unitId, c?.lesson_id)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* Bulk restore */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="Lesson"
+                onRestore={(ids) => restoreLessons(courseId, unitId, ids)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+        </>
+    );
+}

src/modules/admin/components/courses/ArchivedUnitsTable.jsx

@@ -53,7 +53,7 @@ export default function ArchivedUnitsTable({ courseId }) {
     }), [courseId]);
 
     const toolbarActions = buildToolbarActions({
-        fetchUnits: (params) => fetchArchivedUnits(courseId, params),
+        fetchArchivedUnits: (params) => fetchArchivedUnits(courseId, params),
         pagination,
         exportConfig,
         navigate,
@@ -70,7 +70,6 @@ export default function ArchivedUnitsTable({ courseId }) {
         getTableInstance: () => tableRefsRef.current.tableInstance,
     });
 
-
     const columns = useMemo(
         () => buildDataColumns(attributes, rowActions),
         [attributes]

src/modules/admin/components/courses/LessonsTable.jsx

@@ -9,12 +9,14 @@ import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
 
 import { buildDataColumns, columnPinning } from "../../config/courses/lessons/columns.config";
 import { buildToolbarActions } from "../../config/courses/lessons/toolbar.config";
+import { buildSelectionActions } from "../../config/courses/lessons/selection.config";
 import { buildRowActions } from "../../config/courses/lessons/rowActions.config";
 
 import { getTimestamp } from "@/utils/timestamp.util";
 
 export default function LessonsTable({ courseId, unitId }) {
   const [archiveTarget, setArchiveTarget] = useState(null);
+  const [archiveIds, setArchiveIds] = useState(null);
 
   const tableRefsRef = useRef({
     getFilters: () => [],
@@ -26,8 +28,8 @@ export default function LessonsTable({ courseId, unitId }) {
   const navigate = useNavigate();
 
   const {
-    lessons, attributes, pagination, setPagination, loading,
+    course, unit, lessons, attributes, pagination, setPagination, loading,
-    fetchLessons, deleteLesson,
+    fetchLessons, archiveLesson, archiveLessons, fetchLessonFieldValues
   } = useCourses();
 
   const handleRefsReady = (refs) => {
@@ -37,7 +39,7 @@ export default function LessonsTable({ courseId, unitId }) {
   const exportConfig = {
     allData: lessons,
     attributes,
-    filename: `${getTimestamp()}_Lessons`,
+    filename: `${getTimestamp()}_${course?.title}_${unit?.title}_Lessons`,
     sheetName: "Lessons",
   };
 
@@ -66,6 +68,13 @@ export default function LessonsTable({ courseId, unitId }) {
     getTableInstance: () => tableRefsRef.current.tableInstance,
   });
 
+  const selectionActions = buildSelectionActions({
+    exportConfig,
+    onArchive: (row) => setArchiveTarget(row),
+    onArchiveMany: (ids) => setArchiveIds(ids),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
+  });
+
   const columns = useMemo(
     () => buildDataColumns(attributes, rowActions),
     [attributes, rowActions]
@@ -73,6 +82,7 @@ export default function LessonsTable({ courseId, unitId }) {
 
   const handleArchiveSuccess = () => {
     setArchiveTarget(null);
+    setArchiveIds(null);
     tableRefsRef.current.resetSelection?.();
     fetchLessons(courseId, unitId, { page: 1, limit: pagination?.limit ?? 10 });
   };
@@ -88,7 +98,7 @@ export default function LessonsTable({ courseId, unitId }) {
         setPagination={setPagination}
         loading={loading}
         onFetch={handleFetch}
-        onFetchFilterData={() => []}
+        onFetchFilterData={(field) => fetchLessonFieldValues(courseId, unitId, field)}
         onRefsReady={handleRefsReady}
         renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
           <FilterSheet
@@ -102,17 +112,30 @@ export default function LessonsTable({ courseId, unitId }) {
         )}
         columnPinning={columnPinning}
         toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
         recordLabel="lesson"
         emptyMessage="No lessons found."
       />
 
+      {/* ── Single archive ── */}
       <ArchiveDialog
         open={!!archiveTarget}
         onOpenChange={(v) => !v && setArchiveTarget(null)}
         entity={archiveTarget}
         entityLabel="Lesson"
-        getName={(l) => l?.title}
+        getName={(c) => c?.title}
-        onArchive={(l) => deleteLesson(courseId, unitId, l?.lesson_id)}
+        onArchive={(c) => archiveLesson(courseId, unitId, c?.lesson_id)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+
+      {/* ── Bulk archive ── */}
+      <ArchiveDialog
+        open={!!archiveIds}
+        onOpenChange={(v) => !v && setArchiveIds(null)}
+        ids={archiveIds ?? []}
+        entityLabel="Lesson"
+        onArchive={(ids) => archiveLessons(courseId, unitId, ids)}
         loading={loading}
         onSuccess={handleArchiveSuccess}
       />

src/modules/admin/components/courses/UnitsTable.jsx

@@ -29,7 +29,7 @@ export default function UnitsTable({ courseId }) {
   const navigate = useNavigate();
 
   const {
-    units, attributes, pagination, setPagination, loading,
+    course, units, attributes, pagination, setPagination, loading,
     fetchUnits, archiveUnit, archiveUnits, fetchUnitFieldValues
   } = useCourses();
 
@@ -40,7 +40,7 @@ export default function UnitsTable({ courseId }) {
   const exportConfig = {
     allData: units,
     attributes,
-    filename: `${getTimestamp()}_Units`,
+    filename: `${getTimestamp()}_${course?.title}_Units`,
     sheetName: "Units",
   };
 

src/modules/admin/config/courses/lessons/archive/rowActions.config.jsx

@@ -1,41 +1,20 @@
-import { Eye, Pencil, Archive, SquarePlus, SquareChartGantt } from "lucide-react";
+// modules/admin/config/assets/rowActions.config.jsx
+import { RotateCcw } from "lucide-react";
 
-export function buildRowActions({ onCreatePage, onViewPage, onView, onEdit, onArchive }) {
+/**
-  return [
+ * @param {Object}   deps
-    {
+ * @param {Function} deps.onView     (row) → void  — navigate to view page
-      key: "view",
+ * @param {Function} deps.onEdit     (row) → void  — navigate to edit page
-      label: "View Lesson",
+ * @param {Function} deps.onArchive  (row) → void  — open archive dialog
-      icon: <Eye className="h-3.5 w-3.5" />,
+ */
-      onClick: (row) => onView(row),
+export function buildRowActions({ onRestore }) {
-    },
+    return [
-    {
+        {
-      key: "edit",
+            key: "restore",
-      label: "Edit Lesson",
+            label: "Restore",
-      icon: <Pencil className="h-3.5 w-3.5" />,
+            className: "text-emerald-600 focus:text-emerald-600",
-      onClick: (row) => onEdit(row),
+            icon: <RotateCcw className="h-3.5 w-3.5" />,
-    },
+            onClick: (row) => onRestore(row),
-    {
+        },
-      key: "edit",
+    ];
-      label: "View Content",
-      icon: <SquareChartGantt className="h-3.5 w-3.5" />,
-      className: "text-sky-700 hover:text-sky-600",
-      onClick: (row) => onViewPage(row),
-      separator: true,
-    },
-    {
-      key: "edit",
-      label: "Modify Content",
-      icon: <SquarePlus className="h-3.5 w-3.5" />,
-      className: "text-sky-700 hover:text-sky-600",
-      onClick: (row) => onCreatePage(row),
-    },
-    {
-      key: "archive",
-      label: "Archive",
-      icon: <Archive className="h-3.5 w-3.5" />,
-      className: "text-destructive",
-      onClick: (row) => onArchive(row),
-      separator: true
-    },
-  ]
 }

src/modules/admin/config/courses/lessons/archive/selection.config.jsx

@@ -1,7 +1,8 @@
-import { Download, Archive } from "lucide-react";
+// config/assets/archive/selection.config.jsx
+import { Download, ArchiveRestore } from "lucide-react";
 import { exportTableToExcel } from "@/utils/excel.util";
 
-export function buildSelectionActions({ exportConfig, onArchive, onArchiveMany, getTableInstance }) {
+export function buildSelectionActions({ exportConfig, restoreLesson, restoreLessons, getTableInstance }) {
   return [
     {
       key: "export-selected",
@@ -15,15 +16,15 @@ export function buildSelectionActions({ exportConfig, onArchive, onArchiveMany,
         }),
     },
     {
-      key: "archive-selected",
+      key: "restore-selected",
-      label: "Archive",
+      label: "Restore",
-      icon: <Archive className="h-3.5 w-3.5" />,
+      icon: <ArchiveRestore className="h-3.5 w-3.5" />,
-      className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+      className: "text-emerald-600 border-emerald-600/40 hover:bg-emerald-600/10 hover:text-emerald-700",
       onClick: (rows) => {
-        const ids = rows.map((r) => r.asset_id);
+        const ids = rows.map((r) => r.lesson_id);
         ids.length === 1
-          ? onArchive(rows[0])
+          ? restoreLesson(rows[0])
-          : onArchiveMany(ids);
+          : restoreLessons(ids);
       },
     },
   ];

src/modules/admin/config/courses/lessons/archive/toolbar.config.jsx

@@ -1,15 +1,11 @@
-// config/courses/lessons/toolbar.config.jsx
-
 import { Plus, RefreshCw, Download, Archive } from "lucide-react";
 import { exportTableToExcel } from "@/utils/excel.util";
 
 export function buildToolbarActions({
-  fetchLessons,
+  fetchArchivedLessons,
   pagination,
   exportConfig,
   navigate,
-  courseId,
-  unitId,
   getFilters,
   getSort,
   getTableInstance,
@@ -21,7 +17,7 @@ export function buildToolbarActions({
       label: "Refresh",
       icon: <RefreshCw className="h-3.5 w-3.5" />,
       variant: "outline",
-      onClick: () => fetchLessons({
+      onClick: () => fetchArchivedLessons({
         page: 1,
         limit: pagination?.limit ?? 10,
         filters: getFilters(),
@@ -39,24 +35,5 @@ export function buildToolbarActions({
         tableInstance: getTableInstance(),
       }),
     },
-    {
-      key: "create",
-      type: "button",
-      label: "New Lesson",
-      icon: <Plus className="h-3.5 w-3.5" />,
-      variant: "default",
-      onClick: () => navigate(
-        `/admin/courses/${courseId}/units/${unitId}/lessons/add`
-      ),
-    },
-     {
-      key: "archived-lessons",
-      type: "button",
-      icon: <Archive className="h-3.5 w-3.5" />,
-      label: "Archived Lessons",
-      variant: "secondary",
-      className: "border border-border",
-      onClick: () => navigate("/admin/lessons/archived"),
-    },
   ];
 }

src/modules/admin/config/courses/lessons/selection.config.jsx

@@ -20,7 +20,7 @@ export function buildSelectionActions({ exportConfig, onArchive, onArchiveMany,
       icon: <Archive className="h-3.5 w-3.5" />,
       className: "text-destructive border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
       onClick: (rows) => {
-        const ids = rows.map((r) => r.asset_id);
+        const ids = rows.map((r) => r.lesson_id);
         ids.length === 1
           ? onArchive(rows[0])
           : onArchiveMany(ids);

src/modules/admin/config/courses/lessons/toolbar.config.jsx

@@ -56,7 +56,7 @@ export function buildToolbarActions({
       label: "Archived Lessons",
       variant: "secondary",
       className: "border border-border",
-      onClick: () => navigate("/admin/lessons/archived"),
+      onClick: () => navigate(`/admin/courses/${courseId}/units/${unitId}/lessons/archived`),
     },
   ];
 }

src/modules/admin/config/courses/units/archive/toolbar.config.jsx

@@ -2,7 +2,7 @@ import { Plus, RefreshCw, Download, Archive } from "lucide-react";
 import { exportTableToExcel } from "@/utils/excel.util";
 
 export function buildToolbarActions({
-  fetchArchivedCourses,
+  fetchArchivedUnits,
   pagination,
   exportConfig,
   navigate,
@@ -17,7 +17,7 @@ export function buildToolbarActions({
       label: "Refresh",
       icon: <RefreshCw className="h-3.5 w-3.5" />,
       variant: "outline",
-      onClick: () => fetchArchivedCourses({
+      onClick: () => fetchArchivedUnits({
         page: 1,
         limit: pagination?.limit ?? 10,
         filters: getFilters(),

src/modules/admin/pages/courses/lessons/ArchivedLessonsList.jsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, House } from "lucide-react";
+
+import { useCourses } from "@/contexts/AdminCoursesContext";
+import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import ArchivedLessonsTable from "../../../components/courses/ArchivedLessonsTable";
+
+export default function ArchivedLessonsList() {
+  const navigate = useNavigate();
+  const { courseId, unitId } = useParams();
+  const { fetchCourse, fetchUnit, course, unit, loading } = useCourses();
+  const [initializing, setInitializing] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      await fetchCourse(courseId)
+      await fetchUnit(courseId, unitId);
+      setInitializing(false);
+    })();
+  }, [courseId, unitId]);
+
+  const items = [
+    { label: "Home", icon: <House className="size-4" />, to: "/admin" },
+    { label: "Courses", to: "/admin/courses" },
+    { label: course?.title, to: `/admin/courses/${courseId}/units` },
+    { label: unit?.title ?? "...", to: `/admin/courses/${courseId}/units/${unitId}/lessons` },
+    { 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">
+
+          {/* ── Lessons ── */}
+          <ArchivedLessonsTable courseId={courseId} unitId={unitId} />
+
+        </div>
+      </div>
+    </section>
+  );
+}

src/modules/admin/pages/courses/lessons/LessonsList.jsx

@@ -48,13 +48,45 @@ export default function LessonsList() {
         <div className="w-full space-y-6">
 
           {/* ── Unit header ── */}
-          <div className="flex items-center justify-between">
+          <div className="bg-white rounded-xl border p-6 space-y-4">
-            <div className="flex items-center gap-3">
+            {/* Title + Status */}
-              <div>
+            <div>
+              <h6 className="text-xs tracking-widest mb-1">UNIT</h6>
+              <div className="flex items-center gap-2">
                 <h1 className="text-xl font-semibold">{unit?.title}</h1>
-                {unit?.description && (
+                <span
-                  <p className="text-sm text-muted-foreground">{unit.description}</p>
+                  className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${!unit?.deletedBy ? "bg-green-100 text-green-700" : "bg-red-100 text-red-600"
-                )}
+                    }`}
+                >
+                  {!unit?.deletedBy ? "Active" : "Inactive"}
+                </span>
+              </div>
+              {unit?.description && (
+                <p className="text-sm text-muted-foreground mt-0.5">{unit.description}</p>
+              )}
+            </div>
+
+            {/* Stats row */}
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Lessons</p>
+                <p className="font-semibold text-sm">{unit?.lessons?.length}</p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Order</p>
+                <p className="font-semibold text-sm">{unit?.order_index}</p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Created</p>
+                <p className="font-semibold text-sm">
+                  {unit?.createdAt ? new Date(unit.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}
+                </p>
+              </div>
+              <div className="bg-muted/60 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">Last Updated</p>
+                <p className="font-semibold text-sm">
+                  {unit?.updatedAt ? new Date(unit.updatedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}
+                </p>
               </div>
             </div>
           </div>

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

@@ -24,7 +24,7 @@ export default function ArchivedUnitsList() {
     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: course?.title ?? "...", to: `/admin/courses/${courseId}/units` },
         { label: "Archived" }
     ];
 

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

@@ -49,6 +49,7 @@ export default function UnitsList() {
           <div className="bg-white rounded-xl border p-6 space-y-4">
             {/* Title + Status */}
             <div>
+              <h6 className="text-xs tracking-widest mb-1">COURSE</h6>
               <div className="flex items-center gap-2">
                 <h1 className="text-xl font-semibold">{course?.title}</h1>
                 <span

src/modules/admin/routes/AdminRoutes.jsx

@@ -49,6 +49,7 @@ import LessonsList from '../pages/courses/lessons/LessonsList'
 import AddLesson from '../pages/courses/lessons/AddLesson'
 import ViewLesson from '../pages/courses/lessons/ViewLesson'
 import EditLesson from '../pages/courses/lessons/EditLesson'
+import ArchivedLessonsList from '../pages/courses/lessons/ArchivedLessonsList'
 
 // Lesson Page Builder
 import LessonPageBuilder from '../pages/courses/lessons/LessonPageBuilder'
@@ -69,6 +70,7 @@ import EditTask from '../pages/task_list/task/EditTask'
 import ViewTask from '../pages/task_list/task/ViewTask'
 import ArchivedTask from '../pages/task_list/task/ArchiveTask'
 
+
 export const AdminRoutes = {
   element: <ProtectedRoute allowedRoles={['admin']} />,
   children: [
@@ -149,6 +151,7 @@ export const AdminRoutes = {
                   element: <Outlet />,
                   children: [
                     { index: true, element: <LessonsList /> },
+                    { path: 'archived', element: <ArchivedLessonsList /> },
                     { path: 'add', element: <AddLesson /> },
                     { path: ':lessonId/view', element: <ViewLesson /> },
                     { path: ':lessonId/edit', element: <EditLesson /> },