added more things

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

@@ -1,15 +1,13 @@
-import { useMemo, useRef, useState, useCallback } from "react";
+import { useMemo, useRef, useState, useCallback, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import api from "@/utils/api.util";
 
 import { useCourses } from "@/contexts/AdminCoursesContext";
 import { useAuth } from "@/contexts/AuthContext";
 
-import api from "@/utils/api.util";
 import DataTable from "@/components/generic/Table/DataTable";
 import { FilterSheet } from "@/components/generic/Sheet/FilterSheet";
 import { ArchiveDialog } from "@/components/generic/Dialogs/ArchiveDialog";
-import AttachLessonsDialog from "../library/AttachLessonsDialog";
-import { Link2 } from "lucide-react";
 
 import { buildDataColumns, columnPinning } from "../../config/courses/lessons/columns.config";
 import { buildToolbarActions } from "../../config/courses/lessons/toolbar.config";
@@ -22,7 +20,6 @@ import { formatGeneratedBy } from "@/utils/generatedBy.util";
 export default function LessonsTable({ courseId, unitId }) {
   const [archiveTarget, setArchiveTarget] = useState(null);
   const [archiveIds, setArchiveIds] = useState(null);
-  const [attachOpen, setAttachOpen] = useState(false);
 
   const tableRefsRef = useRef({
     getFilters: () => [],
@@ -44,6 +41,17 @@ export default function LessonsTable({ courseId, unitId }) {
     tableRefsRef.current = refs;
   };
 
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories(data.data ?? []))
+      .catch(() => {});
+  }, []);
+  const tierMap = useMemo(
+    () => Object.fromEntries(tierCategories.map((c) => [c.slug, c])),
+    [tierCategories]
+  );
+
   const exportConfig = {
     allData: lessons,
     attributes,
@@ -62,8 +70,7 @@ export default function LessonsTable({ courseId, unitId }) {
     onArchive: (row) => setArchiveTarget(row),
   }), [courseId, unitId]);
 
-  const toolbarActions = [
+  const toolbarActions = buildToolbarActions({
-    ...buildToolbarActions({
     fetchLessons: (params) => fetchLessons(courseId, unitId, params),
     pagination,
     exportConfig,
@@ -73,24 +80,7 @@ export default function LessonsTable({ courseId, unitId }) {
     getFilters: () => tableRefsRef.current.getFilters(),
     getSort: () => tableRefsRef.current.getSort(),
     getTableInstance: () => tableRefsRef.current.tableInstance,
-    }),
+  });
-    // Junction revamp — lessons live standalone in the library; attach without re-creating
-    {
-      key: "attach-existing",
-      type: "button",
-      label: "Attach Existing",
-      icon: <Link2 className="h-3.5 w-3.5" />,
-      variant: "outline",
-      onClick: () => setAttachOpen(true),
-    },
-  ];
-
-  const handleAttachLessons = async (lessonIds) => {
-    for (const lesson_id of lessonIds) {
-      await api.post(`/admin/courses/${courseId}/units/${unitId}/lessons`, { lesson_id });
-    }
-    fetchLessons(courseId, unitId, { page: 1, limit: pagination?.limit ?? 10 });
-  };
 
   const selectionActions = buildSelectionActions({
     exportConfig,
@@ -100,8 +90,8 @@ export default function LessonsTable({ courseId, unitId }) {
   });
 
   const columns = useMemo(
-    () => buildDataColumns(attributes, rowActions),
+    () => buildDataColumns(attributes, rowActions, tierMap, unit?.subscription, course?.subscription),
-    [attributes, rowActions]
+    [attributes, rowActions, tierMap, unit?.subscription, course?.subscription]
   );
 
   const handleArchiveSuccess = () => {
@@ -163,15 +153,6 @@ export default function LessonsTable({ courseId, unitId }) {
         loading={loading}
         onSuccess={handleArchiveSuccess}
       />
-
-      {/* ── Attach existing library lessons ── */}
-      <AttachLessonsDialog
-        open={attachOpen}
-        onOpenChange={setAttachOpen}
-        attachedLessonIds={lessons.map((l) => l.lesson_id)}
-        onAttach={handleAttachLessons}
-        loading={loading}
-      />
     </>
   );
 }

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

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState, useCallback } from "react";
+import { useMemo, useRef, useState, useCallback, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import api from "@/utils/api.util";
 
@@ -41,6 +41,17 @@ export default function UnitsTable({ courseId, returnTo }) {
     tableRefsRef.current = refs;
   };
 
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories(data.data ?? []))
+      .catch(() => {});
+  }, []);
+  const tierMap = useMemo(
+    () => Object.fromEntries(tierCategories.map((c) => [c.slug, c])),
+    [tierCategories]
+  );
+
   const exportConfig = {
     allData: units,
     attributes,
@@ -79,8 +90,8 @@ export default function UnitsTable({ courseId, returnTo }) {
   });
 
   const columns = useMemo(
-    () => buildDataColumns(attributes, rowActions),
+    () => buildDataColumns(attributes, rowActions, tierMap, course?.subscription),
-    [attributes, rowActions]
+    [attributes, rowActions, tierMap, course?.subscription]
   );
 
   const handleArchiveSuccess = () => {

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

@@ -2,11 +2,13 @@
 // Column definitions and pinning config for the Users table.
 
 import { Badge } from "@/components/ui/badge";
-import { Clock } from "lucide-react";
+import { Clock, Tag } from "lucide-react";
+import * as LucideIcons from "lucide-react";
 import { buildColumns } from "@/utils/table.util";
 import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
 import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
 import { formatDuration } from "@/utils/timestamp.util";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
 
 export const columnPinning = {
   right: ["actions"],
@@ -14,7 +16,8 @@ export const columnPinning = {
 };
 
 // ─── Custom cell overrides ────────────────────────────────────────────────────
-const cellOverrides = {
+function buildCellOverrides(tierMap, unitSubscription, courseSubscription) {
+  return {
   duration_seconds: (info) => {
     const seconds = parseInt(info.getValue() ?? 0, 10);
 
@@ -27,17 +30,35 @@ const cellOverrides = {
       </div>
     );
   },
+  subscription: (info) => {
+    const slug = info.getValue() || unitSubscription || courseSubscription;
+    if (!slug) return <span className="text-muted-foreground/40">-</span>;
+
+    const { label, cls } = resolveTierBadge(slug, tierMap);
+    const Icon = LucideIcons[tierMap[slug]?.badge_icon] ?? Tag;
+    return (
+      <Badge className={cls}>
+        <Icon className="size-3" />
+        {label}
+      </Badge>
+    );
+  },
   };
+}
 
 /**
  * Builds the full column array for the Users table.
  *
  * @param {Array}    attributes         Field definitions from the server (drives data columns)
  * @param {Array}    rowActions         Row-level kebab action definitions
+ * @param {Object}   tierMap            slug → tier category, for colored Subscription badges
+ * @param {string}   unitSubscription   Parent unit's tier, used when the lesson has no direct tier of its own
+ * @param {string}   courseSubscription Parent course's tier, used when neither the lesson nor the unit has one
  * @returns {Array}                     TanStack column definitions
  */
-export function buildDataColumns(attributes, rowActions) {
+export function buildDataColumns(attributes, rowActions, tierMap = {}, unitSubscription = null, courseSubscription = null) {
   const visibleAttributes = attributes.filter((a) => !a.hidden);
+  const cellOverrides = buildCellOverrides(tierMap, unitSubscription, courseSubscription);
 
   return [
     buildSelectionColumn(),

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

@@ -2,11 +2,13 @@
 // Column definitions and pinning config for the Users table.
 
 import { Badge } from "@/components/ui/badge";
-import { Clock } from "lucide-react";
+import { Clock, Tag } from "lucide-react";
+import * as LucideIcons from "lucide-react";
 import { buildColumns } from "@/utils/table.util";
 import { buildSelectionColumn } from "@/components/generic/Table/buildSelectionColumn";
 import { buildRowActionsColumn } from "@/components/generic/Table/buildRowActionsColumn";
 import { formatDuration } from "@/utils/timestamp.util";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
 
 export const columnPinning = {
   right: ["actions"],
@@ -14,7 +16,8 @@ export const columnPinning = {
 };
 
 // ─── Custom cell overrides ────────────────────────────────────────────────────
-const cellOverrides = {
+function buildCellOverrides(tierMap, courseSubscription) {
+  return {
   duration_seconds: (info) => {
     const seconds = parseInt(info.getValue() ?? 0, 10);
 
@@ -27,17 +30,34 @@ const cellOverrides = {
       </div>
     );
   },
+  subscription: (info) => {
+    const slug = info.getValue() || courseSubscription;
+    if (!slug) return <span className="text-muted-foreground/40">-</span>;
+
+    const { label, cls } = resolveTierBadge(slug, tierMap);
+    const Icon = LucideIcons[tierMap[slug]?.badge_icon] ?? Tag;
+    return (
+      <Badge className={cls}>
+        <Icon className="size-3" />
+        {label}
+      </Badge>
+    );
+  },
   };
+}
 
 /**
  * Builds the full column array for the Users table.
  *
  * @param {Array}    attributes         Field definitions from the server (drives data columns)
  * @param {Array}    rowActions         Row-level kebab action definitions
+ * @param {Object}   tierMap            slug → tier category, for colored Subscription badges
+ * @param {string}   courseSubscription Parent course's tier, used when the unit has no direct tier of its own
  * @returns {Array}                     TanStack column definitions
  */
-export function buildDataColumns(attributes, rowActions) {
+export function buildDataColumns(attributes, rowActions, tierMap = {}, courseSubscription = null) {
   const visibleAttributes = attributes.filter((a) => !a.hidden);
+  const cellOverrides = buildCellOverrides(tierMap, courseSubscription);
 
   return [
     buildSelectionColumn(),

src/modules/admin/pages/courses/ViewCourse.jsx

@@ -297,9 +297,9 @@ function CourseDetailsTab({ course, loading, instructors, achievementKeys, achie
 
 const TABS = [
   { key: "details", label: "Course Details", icon: BookOpen },
-  { key: "progress",   label: "Reading Progress",  icon: BarChart2     },
-  { key: "units",      label: "Units",             icon: Layers        },
   { key: "assessment", label: "Assessment", icon: ClipboardList },
+  { key: "units", label: "Units", icon: Layers },
+  { key: "progress", label: "Reading Progress", icon: BarChart2 },
 ];
 
 const WIDE_TABS = new Set(["units", "assessment"]);

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

@@ -7,13 +7,14 @@ import { nanoid } from "nanoid";
 import {
   ChevronLeft, ChevronRight, Check,
   FileText, LayoutTemplate, ListChecks,
-  Plus, Trash2,
+  Plus, Trash2, Link2,
 } from "lucide-react";
 
 import { useCourses } from "@/contexts/AdminCoursesContext";
 import { useAuth } from "@/contexts/AuthContext";
 import { PageMeta } from "@/contexts/MetadataContext";
 import { cn } from "@/lib/utils";
+import api from "@/utils/api.util";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -28,6 +29,7 @@ import { AddBlockMenu } from "@/components/generic/AddBlockMenu";
 import { PreviewContent, PreviewChrome } from "../../../components/courses/LessonsPreview";
 import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
 import DraftRequirementsEditor from "@/modules/admin/components/courses/DraftRequirementsEditor";
+import AttachLessonsDialog from "@/modules/admin/components/library/AttachLessonsDialog";
 
 function makeBlock(type) {
   return { id: nanoid(), type, content: { ...DEFAULT_CONTENT[type] } };
@@ -231,8 +233,10 @@ export default function AddLesson() {
   } = useCourses();
   const { user } = useAuth();
 
+  const [mode, setMode] = useState(null); // null | "create" — the wizard only shows once "Create" is chosen
   const [step, setStep] = useState(0);
   const [requirements, setRequirements] = useState([]);
+  const [attachOpen, setAttachOpen] = useState(false);
 
   const {
     register, control, trigger, getValues, setValue,
@@ -294,6 +298,14 @@ export default function AddLesson() {
     navigate(`/admin/courses/${courseId}/units/${unitId}/lessons`);
   };
 
+  const handleAttachLessons = async (lessonIds) => {
+    for (const lesson_id of lessonIds) {
+      await api.post(`/admin/courses/${courseId}/units/${unitId}/lessons`, { lesson_id });
+    }
+    bypassOnce();
+    navigate(`/admin/courses/${courseId}/units/${unitId}/lessons`);
+  };
+
   return (
     <section className="bg-muted h-full">
       <PageMeta title={unit ? `Add Lesson – ${unit.title} - STARR` : undefined} />
@@ -301,7 +313,12 @@ export default function AddLesson() {
 
         <div className="w-full max-w-3xl mx-auto space-y-6">
           <div className="flex items-center gap-3">
-            <Button type="button" variant="ghost" size="icon" onClick={handleBack}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={() => (mode === "create" && step > 0 ? setStep(0) : handleBack())}
+            >
               <ChevronLeft className="h-4 w-4" />
             </Button>
             <div>
@@ -314,6 +331,23 @@ export default function AddLesson() {
             </div>
           </div>
 
+          {/* Select existing vs. create new */}
+          <div className="flex items-start justify-between gap-3 pb-3 border-b border-border">
+            <p className="text-xs text-muted-foreground">
+              Attach an existing library lesson to reuse its content, or create a new one from scratch.
+            </p>
+            <div className="flex items-center gap-2 shrink-0">
+              <Button type="button" variant="outline" size="sm" onClick={() => setAttachOpen(true)}>
+                <Link2 className="h-3.5 w-3.5 mr-1.5" /> Select
+              </Button>
+              <Button type="button" variant="outline" size="sm" onClick={() => setMode("create")}>
+                <Plus className="h-3.5 w-3.5 mr-1.5" /> Create
+              </Button>
+            </div>
+          </div>
+
+          {mode === "create" && (
+            <>
               {/* Stepper */}
               <div className="flex items-center gap-0">
                 {STEPS.map((s, i) => {
@@ -397,10 +431,20 @@ export default function AddLesson() {
                   </Button>
                 )}
               </div>
+            </>
+          )}
         </div>
       </div>
 
       {unsavedChangesDialog}
+
+      <AttachLessonsDialog
+        open={attachOpen}
+        onOpenChange={setAttachOpen}
+        attachedLessonIds={unit?.lessons?.map((l) => l.lesson_id) ?? []}
+        onAttach={handleAttachLessons}
+        loading={loading}
+      />
     </section>
   );
 }

src/modules/admin/pages/task_list/ViewTaskList.jsx

@@ -248,7 +248,7 @@ export default function ViewTaskList() {
                                                     <span className="text-xs text-muted-foreground w-5 text-right shrink-0">
                                                         {index + 1}.
                                                     </span>
-                                                    <span className="flex-1 text-sm text-left truncate">
+                                                    <span className="flex-1 text-sm text-left truncate w-48">
                                                         {task.name ?? `Task ${index + 1}`}
                                                     </span>
                                                     {task.requirements?.length > 0 && (