Adjusted

src/contexts/AdminCoursesContext.jsx

@@ -275,10 +275,10 @@ export function CoursesProvider({ children }) {
     [request],
   );
 
-  const deleteUnit = useCallback(
+  const archiveUnit = useCallback(
-    (courseId, unitId, deletedBy) =>
+    (courseId, unitId) =>
       request(async () => {
-        const { data } = await api.delete(`${BASE}/${courseId}/units/${unitId}`, { data: { deletedBy } });
+        const { data } = await api.delete(`${BASE}/${courseId}/units/${unitId}`);
         setUnits((prev) => prev.filter((u) => u.unit_id !== unitId));
         setUnit((prev) => (prev?.unit_id === unitId ? null : prev));
         toast.success("Unit archived.");
@@ -287,10 +287,10 @@ export function CoursesProvider({ children }) {
     [request],
   );
 
-  const bulkArchiveUnits = useCallback(
+  const archiveUnits = useCallback(
-    (courseId, ids, deletedBy) =>
+    (courseId, { ids }) =>
       request(async () => {
-        const { data } = await api.delete(`${BASE}/${courseId}/units/bulk`, { data: { ids, deletedBy } });
+        const { data } = await api.delete(`${BASE}/${courseId}/units/bulk`, { data: { ids } });
         setUnits((prev) => prev.filter((u) => !ids.includes(u.unit_id)));
         toast.success("Units archived.");
         return data;
@@ -318,9 +318,9 @@ export function CoursesProvider({ children }) {
   );
 
   const restoreUnit = useCallback(
-    (courseId, unitId, restoredBy) =>
+    (courseId, unitId) =>
       request(async () => {
-        const { data } = await api.patch(`${BASE}/${courseId}/units/${unitId}/restore`, { restoredBy });
+        const { data } = await api.patch(`${BASE}/${courseId}/units/${unitId}/restore`);
         const result = data?.data?.data ?? null;
         if (result) {
           setUnits((prev) => prev.filter((u) => u.unit_id !== unitId));
@@ -331,10 +331,10 @@ export function CoursesProvider({ children }) {
     [request],
   );
 
-  const bulkRestoreUnits = useCallback(
+  const restoreUnits = useCallback(
-    (courseId, ids, restoredBy) =>
+    (courseId, { ids }) =>
       request(async () => {
-        const { data } = await api.patch(`${BASE}/${courseId}/units/restore/bulk`, { ids, restoredBy });
+        const { data } = await api.patch(`${BASE}/${courseId}/units/restore/bulk`, { ids } );
         setUnits((prev) => prev.filter((u) => !ids.includes(u.unit_id)));
         toast.success("Units restored.");
         return data;
@@ -857,6 +857,26 @@ export function CoursesProvider({ children }) {
     [request],
   );
 
+  const fetchUnitFieldValues = useCallback(
+    (courseId, field) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}/field-values`, { params: { field } });
+        const result = data?.data ?? [];
+        return result;
+      }),
+    [request],
+  );
+
+  const fetchLessonFieldValues = useCallback(
+    (courseId, unitId, field) =>
+      request(async () => {
+        const { data } = await api.get(`${BASE}/${courseId}/units/${unitId}/field-values`, { params: { field } });
+        const result = data?.data ?? [];
+        return result;
+      }),
+    [request],
+  );
+
   // ─── Provider value ───────────────────────────────────────────────────────
   return (
     <CoursesContext.Provider value={{
@@ -907,14 +927,14 @@ export function CoursesProvider({ children }) {
       fetchUnit,
       createUnit,
       updateUnit,
-      deleteUnit,
+      archiveUnit,
-      bulkArchiveUnits,
+      archiveUnits,
 
       // ── unit archives & restore ────────────────────────────────────────────
       fetchArchivedUnits,
       fetchArchivedUnit,
       restoreUnit,
-      bulkRestoreUnits,
+      restoreUnits,
 
       // ── unit quiz ──────────────────────────────────────────────────────────
       fetchQuiz,
@@ -980,6 +1000,8 @@ export function CoursesProvider({ children }) {
 
       // ── fetch field values ─────────────────────────────
       fetchCourseFieldValues,
+      fetchUnitFieldValues,
+      fetchLessonFieldValues
     }}>
       {children}
     </CoursesContext.Provider>

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

@@ -0,0 +1,140 @@
+import { useMemo, useRef, useState, 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/units/archive/columns.config";
+import { buildToolbarActions } from "../../config/courses/units/archive/toolbar.config";
+import { buildSelectionActions } from "../../config/courses/units/archive/selection.config";
+import { buildRowActions } from "../../config/courses/units/archive/rowActions.config";
+
+import { getTimestamp } from "@/utils/timestamp.util";
+
+export default function ArchivedUnitsTable({ courseId }) {
+    const [restoreTarget, setRestoreTarget] = useState(null);
+    const [restoreIds, setRestoreIds] = useState(null);
+
+    const tableRefsRef = useRef({
+        getFilters: () => [],
+        getSort: () => [],
+        resetSelection: () => { },
+        setFilters: () => { },
+    });
+
+    const navigate = useNavigate();
+
+    const {
+        course, units, attributes, pagination, setPagination, loading,
+        fetchArchivedUnits, restoreUnit, restoreUnits, fetchUnitFieldValues
+    } = useCourses();
+
+    const handleRefsReady = (refs) => {
+        tableRefsRef.current = refs;
+    };
+
+    const exportConfig = {
+        allData: units,
+        attributes,
+        filename: `${getTimestamp()}_${course?.title}_ArchivedUnits`,
+        sheetName: "Archived Units",
+    };
+
+    const handleFetch = useCallback(
+        (params) => fetchArchivedUnits(courseId, params),
+        [courseId]
+    );
+
+    const rowActions = useMemo(() => buildRowActions({
+        onRestore: (row) => setRestoreTarget(row)
+    }), [courseId]);
+
+    const toolbarActions = buildToolbarActions({
+        fetchUnits: (params) => fetchArchivedUnits(courseId, params),
+        pagination,
+        exportConfig,
+        navigate,
+        courseId,
+        getFilters: () => tableRefsRef.current.getFilters(),
+        getSort: () => tableRefsRef.current.getSort(),
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+    const selectionActions = buildSelectionActions({
+        exportConfig,
+        restoreCourse: (row) => setRestoreTarget(row),  // single
+        restoreCourses: (ids) => setRestoreIds(ids),      // bulk
+        getTableInstance: () => tableRefsRef.current.tableInstance,
+    });
+
+
+    const columns = useMemo(
+        () => buildDataColumns(attributes, rowActions),
+        [attributes]
+    );
+
+    const handleRestoreSuccess = () => {
+        setRestoreTarget(null);
+        setRestoreIds(null);
+        tableRefsRef.current.resetSelection?.();
+        fetchArchivedUnits(courseId, { page: 1, limit: pagination?.limit ?? 10 });
+    };
+
+    return (
+        <>
+            <DataTable
+                title="Archvied Units"
+                data={units}
+                columns={columns}
+                attributes={attributes}
+                pagination={pagination}
+                setPagination={setPagination}
+                loading={loading}
+                onFetch={handleFetch}
+                onFetchFilterData={(field) => fetchUnitFieldValues(courseId, 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="unit"
+                emptyMessage="No units found."
+            />
+
+            {/* Single restore */}
+            <RestoreDialog
+                open={!!restoreTarget}
+                onOpenChange={(v) => !v && setRestoreTarget(null)}
+                entity={restoreTarget}
+                entityLabel="Unit"
+                getName={(c) => c?.title}
+                onRestore={(c) => restoreUnit(courseId, c?.unit_id)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+
+            {/* Bulk restore */}
+            <RestoreDialog
+                open={!!restoreIds}
+                onOpenChange={(v) => !v && setRestoreIds(null)}
+                ids={restoreIds ?? []}
+                entityLabel="Unit"
+                onRestore={(ids) => restoreUnits(courseId, ids)}
+                loading={loading}
+                onSuccess={handleRestoreSuccess}
+            />
+        </>
+    );
+}

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

@@ -10,12 +10,14 @@ import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
 
 import { buildDataColumns, columnPinning } from "../../config/courses/units/columns.config";
 import { buildToolbarActions } from "../../config/courses/units/toolbar.config";
+import { buildSelectionActions } from "../../config/courses/units/selection.config";
 import { buildRowActions } from "../../config/courses/units/rowActions.config";
 
 import { getTimestamp } from "@/utils/timestamp.util";
 
 export default function UnitsTable({ courseId }) {
   const [archiveTarget, setArchiveTarget] = useState(null);
+  const [archiveIds, setArchiveIds] = useState(null);
 
   const tableRefsRef = useRef({
     getFilters: () => [],
@@ -28,7 +30,7 @@ export default function UnitsTable({ courseId }) {
 
   const {
     units, attributes, pagination, setPagination, loading,
-    fetchUnits, deleteUnit,
+    fetchUnits, archiveUnit, archiveUnits, fetchUnitFieldValues
   } = useCourses();
 
   const handleRefsReady = (refs) => {
@@ -66,6 +68,13 @@ export default function UnitsTable({ courseId }) {
     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 UnitsTable({ courseId }) {
 
   const handleArchiveSuccess = () => {
     setArchiveTarget(null);
+    setArchiveIds(null);
     tableRefsRef.current.resetSelection?.();
     fetchUnits(courseId, { page: 1, limit: pagination?.limit ?? 10 });
   };
@@ -88,7 +98,7 @@ export default function UnitsTable({ courseId }) {
         setPagination={setPagination}
         loading={loading}
         onFetch={handleFetch}
-        onFetchFilterData={() => []}
+        onFetchFilterData={(field) => fetchUnitFieldValues(courseId, field)}
         onRefsReady={handleRefsReady}
         renderFilterSheet={({ open, onOpenChange, column, attr, data, loading }) => (
           <FilterSheet
@@ -102,17 +112,30 @@ export default function UnitsTable({ courseId }) {
         )}
         columnPinning={columnPinning}
         toolbarActions={toolbarActions}
+        selectionActions={selectionActions}
         recordLabel="unit"
         emptyMessage="No units found."
       />
 
+      {/* ── Single archive ── */}
       <ArchiveDialog
         open={!!archiveTarget}
         onOpenChange={(v) => !v && setArchiveTarget(null)}
         entity={archiveTarget}
         entityLabel="Unit"
-        getName={(u) => u?.title}
+        getName={(c) => c?.title}
-        onArchive={(u) => deleteUnit(courseId, u?.unit_id)}
+        onArchive={(c) => archiveUnit(courseId, c?.unit_id)}
+        loading={loading}
+        onSuccess={handleArchiveSuccess}
+      />
+
+      {/* ── Bulk archive ── */}
+      <ArchiveDialog
+        open={!!archiveIds}
+        onOpenChange={(v) => !v && setArchiveIds(null)}
+        ids={archiveIds ?? []}
+        entityLabel="Unit"
+        onArchive={(ids) => archiveUnits(courseId, ids)}
         loading={loading}
         onSuccess={handleArchiveSuccess}
       />

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

@@ -15,7 +15,6 @@ export function buildRowActions({ onRestore }) {
             className: "text-emerald-600 focus:text-emerald-600",
             icon: <RotateCcw className="h-3.5 w-3.5" />,
             onClick: (row) => onRestore(row),
-            hidden: (row) => row.is_active,
         },
     ];
 }

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

@@ -1,42 +1,20 @@
-import { Eye, Pencil, Archive, BookCheck, NotebookPen } from "lucide-react";
+// modules/admin/config/assets/rowActions.config.jsx
+import { RotateCcw } from "lucide-react";
 
-export function buildRowActions({ onViewLessons, onView, onEdit, onArchive, onQuiz }) {
+/**
-  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 Info",
+ * @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 Info",
+            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: "view_units",
+    ];
-      label: "View Lessons",
+}
-      icon: <BookCheck className="h-3.5 w-3.5" />,
-      className: "text-sky-700 hover:text-sky-600",
-      onClick: (row) => onViewLessons(row),
-      separator: true
-    },
-    {
-      key: "modify_quiz",
-      label: "Modify Quiz",
-      icon: <NotebookPen className="h-3.5 w-3.5" />,
-      className: "text-purple-700 hover:text-purple-600",
-      onClick: (row) => onQuiz(row),
-      separator: true
-    },
-    {
-      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/units/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, restoreCourse, restoreCourses, getTableInstance }) {
   return [
     {
       key: "export-selected",
@@ -15,16 +16,16 @@ 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.unit_id);
         ids.length === 1
-          ? onArchive(rows[0])
+          ? restoreCourse(rows[0])
-          : onArchiveMany(ids);
+          : restoreCourses(ids);
       },
     },
   ];
-}
+}

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

@@ -2,11 +2,10 @@ import { Plus, RefreshCw, Download, Archive } from "lucide-react";
 import { exportTableToExcel } from "@/utils/excel.util";
 
 export function buildToolbarActions({
-  fetchUnits,
+  fetchArchivedCourses,
   pagination,
   exportConfig,
   navigate,
-  courseId,
   getFilters,
   getSort,
   getTableInstance,
@@ -18,7 +17,7 @@ export function buildToolbarActions({
       label: "Refresh",
       icon: <RefreshCw className="h-3.5 w-3.5" />,
       variant: "outline",
-      onClick: () => fetchUnits({
+      onClick: () => fetchArchivedCourses({
         page: 1,
         limit: pagination?.limit ?? 10,
         filters: getFilters(),
@@ -36,22 +35,5 @@ export function buildToolbarActions({
         tableInstance: getTableInstance(),
       }),
     },
-    {
-      key: "create",
-      type: "button",
-      label: "New Unit",
-      icon: <Plus className="h-3.5 w-3.5" />,
-      variant: "default",
-      onClick: () => navigate(`/admin/courses/${courseId}/units/add`),
-    },
-    {
-      key: "archived-units",
-      type: "button",
-      icon: <Archive className="h-3.5 w-3.5" />,
-      label: "Archived Units",
-      variant: "secondary",
-      className: "border border-border",
-      onClick: () => navigate("/admin/units/archived"),
-    },
   ];
 }

src/modules/admin/config/courses/units/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.unit_id);
         ids.length === 1
           ? onArchive(rows[0])
           : onArchiveMany(ids);

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

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

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();

src/modules/admin/routes/AdminRoutes.jsx

@@ -42,6 +42,7 @@ import UnitsList from '../pages/courses/units/UnitsList'
 import AddUnit from '../pages/courses/units/AddUnit'
 import ViewUnit from '../pages/courses/units/ViewUnit'
 import EditUnit from '../pages/courses/units/EditUnit'
+import ArchivedUnitsList from '../pages/courses/units/ArchivedUnitsList'
 
 // Lessons
 import LessonsList from '../pages/courses/lessons/LessonsList'
@@ -136,6 +137,7 @@ export const AdminRoutes = {
               element: <Outlet />,
               children: [
                 { index: true, element: <UnitsList /> },
+                { path: 'archived', element: <ArchivedUnitsList /> },
                 { path: 'add', element: <AddUnit /> },
                 { path: ':unitId/view', element: <ViewUnit /> },
                 { path: ':unitId/edit', element: <EditUnit /> },