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,35 +70,17 @@ export default function LessonsTable({ courseId, unitId }) {
     onArchive: (row) => setArchiveTarget(row),
   }), [courseId, unitId]);
 
-  const toolbarActions = [
+  const toolbarActions = buildToolbarActions({
-    ...buildToolbarActions({
+    fetchLessons: (params) => fetchLessons(courseId, unitId, params),
-      fetchLessons: (params) => fetchLessons(courseId, unitId, params),
+    pagination,
-      pagination,
+    exportConfig,
-      exportConfig,
+    navigate,
-      navigate,
+    courseId,
-      courseId,
+    unitId,
-      unitId,
+    getFilters: () => tableRefsRef.current.getFilters(),
-      getFilters: () => tableRefsRef.current.getFilters(),
+    getSort: () => tableRefsRef.current.getSort(),
-      getSort: () => tableRefsRef.current.getSort(),
+    getTableInstance: () => tableRefsRef.current.tableInstance,
-      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}    attributes         Field definitions from the server (drives data columns)
- * @param {Array}    rowActions  Row-level kebab action definitions
+ * @param {Array}    rowActions         Row-level kebab action definitions
- * @returns {Array}              TanStack column 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}    attributes         Field definitions from the server (drives data columns)
- * @param {Array}    rowActions  Row-level kebab action definitions
+ * @param {Array}    rowActions         Row-level kebab action definitions
- * @returns {Array}              TanStack column 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

@@ -44,9 +44,9 @@ function SectionCard({ icon: Icon, title, children }) {
 }
 
 const LEVEL_BADGE = {
-  beginner:     "secondary",
+  beginner: "secondary",
   intermediate: "outline",
-  advanced:     "destructive",
+  advanced: "destructive",
 };
 
 const SUBSCRIPTION_BADGE = {
@@ -156,7 +156,7 @@ function CourseDetailsTab({ course, loading, instructors, achievementKeys, achie
           <ul className="space-y-3">
             {instructors.map((inst, i) => {
               const fullName = inst.user?.personal_info?.name?.full_name ?? null;
-              const email    = inst.user?.email ?? null;
+              const email = inst.user?.email ?? null;
               return (
                 <li key={inst.id ?? i} className="flex items-center gap-3">
                   <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0">
@@ -296,10 +296,10 @@ function CourseDetailsTab({ course, loading, instructors, achievementKeys, achie
 // ─── Tabs config ───────────────────────────────────────────────────────────────
 
 const TABS = [
-  { key: "details",    label: "Course Details",   icon: BookOpen      },
+  { key: "details", label: "Course Details", icon: BookOpen },
-  { key: "progress",   label: "Reading Progress",  icon: BarChart2     },
+  { key: "assessment", label: "Assessment", icon: ClipboardList },
-  { key: "units",      label: "Units",             icon: Layers        },
+  { key: "units", label: "Units", icon: Layers },
-  { key: "assessment", label: "Assessment",        icon: ClipboardList },
+  { key: "progress", label: "Reading Progress", icon: BarChart2 },
 ];
 
 const WIDE_TABS = new Set(["units", "assessment"]);
@@ -311,29 +311,29 @@ export default function ViewCourse() {
   const { courseId } = useParams();
   const { fetchCourse, course, loading } = useCourses();
 
-  const [activeTab,      setActiveTab]      = useState("details");
+  const [activeTab, setActiveTab] = useState("details");
-  const [instructors,    setInstructors]    = useState([]);
+  const [instructors, setInstructors] = useState([]);
   const [achievementKeys, setAchievementKeys] = useState([]);
   const [achievementRegistry, setAchievementRegistry] = useState([]);
-  const [badgeImageUrl,  setBadgeImageUrl]  = useState(null);
+  const [badgeImageUrl, setBadgeImageUrl] = useState(null);
 
   useEffect(() => {
     fetchCourse(courseId);
 
     api.get(`/admin/courses/${courseId}/instructors`)
       .then(({ data }) => setInstructors(data.data?.data ?? data.data ?? []))
-      .catch(() => {});
+      .catch(() => { });
 
     api.get(`/admin/courses/${courseId}/achievements`)
       .then(({ data }) => {
         const rows = data?.data?.data ?? [];
         setAchievementKeys(rows.map((r) => r.achievement_key));
       })
-      .catch(() => {});
+      .catch(() => { });
 
     api.get("/admin/achievements")
       .then(({ data }) => setAchievementRegistry(data.data ?? []))
-      .catch(() => {});
+      .catch(() => { });
   }, [courseId]);
 
   useEffect(() => {
@@ -345,7 +345,7 @@ export default function ViewCourse() {
     api.post("/admin/media/token", { asset_id: course.badge_asset_id })
       .then(({ data }) => {
         const thumbUrl = data.data?.thumbnail_url;
-        const token    = data.data?.token;
+        const token = data.data?.token;
         setBadgeImageUrl(thumbUrl ?? (token ? `${STREAM_BASE}/${token}` : null));
       })
       .catch(() => setBadgeImageUrl(course.badge_image_url ?? null));

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,93 +331,120 @@ export default function AddLesson() {
             </div>
           </div>
 
-          {/* Stepper */}
+          {/* Select existing vs. create new */}
-          <div className="flex items-center gap-0">
+          <div className="flex items-start justify-between gap-3 pb-3 border-b border-border">
-            {STEPS.map((s, i) => {
+            <p className="text-xs text-muted-foreground">
-              const Icon = s.icon;
+              Attach an existing library lesson to reuse its content, or create a new one from scratch.
-              const isActive = step === i;
+            </p>
-              const isDone = step > i;
+            <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>
 
-              return (
+          {mode === "create" && (
-                <div key={s.id} className="flex items-center flex-1 last:flex-none">
+            <>
-                  <div className="flex flex-col items-center gap-1">
+              {/* Stepper */}
-                    <div className={cn(
+              <div className="flex items-center gap-0">
-                      "h-8 w-8 rounded-full flex items-center justify-center border transition-colors",
+                {STEPS.map((s, i) => {
-                      isDone   && "bg-emerald-600 border-emerald-600 text-white",
+                  const Icon = s.icon;
-                      isActive && "border-primary bg-primary text-primary-foreground",
+                  const isActive = step === i;
-                      !isActive && !isDone && "border-border bg-background text-muted-foreground"
+                  const isDone = step > i;
-                    )}>
+
-                      {isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
+                  return (
+                    <div key={s.id} className="flex items-center flex-1 last:flex-none">
+                      <div className="flex flex-col items-center gap-1">
+                        <div className={cn(
+                          "h-8 w-8 rounded-full flex items-center justify-center border transition-colors",
+                          isDone   && "bg-emerald-600 border-emerald-600 text-white",
+                          isActive && "border-primary bg-primary text-primary-foreground",
+                          !isActive && !isDone && "border-border bg-background text-muted-foreground"
+                        )}>
+                          {isDone ? <Check className="h-4 w-4" /> : <Icon className="h-4 w-4" />}
+                        </div>
+                        <span className={cn(
+                          "text-[11px] font-medium whitespace-nowrap hidden sm:block",
+                          isActive ? "text-foreground"  : "text-muted-foreground",
+                          isDone   ? "text-emerald-600" : ""
+                        )}>
+                          {s.label}
+                        </span>
+                      </div>
+                      {i < STEPS.length - 1 && (
+                        <div className={cn(
+                          "flex-1 h-px mx-2 mb-4 transition-colors",
+                          step > i ? "bg-emerald-600" : "bg-border"
+                        )} />
+                      )}
                     </div>
-                    <span className={cn(
+                  );
-                      "text-[11px] font-medium whitespace-nowrap hidden sm:block",
+                })}
-                      isActive ? "text-foreground"  : "text-muted-foreground",
-                      isDone   ? "text-emerald-600" : ""
-                    )}>
-                      {s.label}
-                    </span>
-                  </div>
-                  {i < STEPS.length - 1 && (
-                    <div className={cn(
-                      "flex-1 h-px mx-2 mb-4 transition-colors",
-                      step > i ? "bg-emerald-600" : "bg-border"
-                    )} />
-                  )}
-                </div>
-              );
-            })}
-          </div>
-
-          {/* Step content */}
-          <div>
-            {step === 0 && (
-              <StepDetails register={register} errors={errors} control={control} />
-            )}
-
-            {step === 1 && (
-              <StepPageBuilder control={control} setValue={setValue} getValues={getValues} />
-            )}
-
-            {step === 2 && (
-              <div className="rounded-lg border bg-card p-6 space-y-4">
-                <p className="text-sm text-muted-foreground">
-                  Configure how learners complete this lesson — optional, sensible defaults apply automatically. This is created together with the rest of the lesson when you finish.
-                </p>
-                <DraftRequirementsEditor
-                  entityType="lesson"
-                  items={requirements}
-                  onChange={setRequirements}
-                  blockTypes={(getValues("blocks") ?? []).map((b) => b.type)}
-                />
               </div>
-            )}
-          </div>
 
-          <div className="flex justify-between gap-3">
+              {/* Step content */}
-            <Button type="button" variant="outline" onClick={handleBack} disabled={loading}>
+              <div>
-              <ChevronLeft className="h-4 w-4 mr-1" />
+                {step === 0 && (
-              {step === 0 ? "Cancel" : "Back"}
+                  <StepDetails register={register} errors={errors} control={control} />
-            </Button>
+                )}
 
-            {step < 2 ? (
+                {step === 1 && (
-              <Button type="button" onClick={handleNext}>
+                  <StepPageBuilder control={control} setValue={setValue} getValues={getValues} />
-                Next
+                )}
-                <ChevronRight className="h-4 w-4 ml-1" />
+
-              </Button>
+                {step === 2 && (
-            ) : (
+                  <div className="rounded-lg border bg-card p-6 space-y-4">
-              // Only the true final step (Requirements) actually persists
+                    <p className="text-sm text-muted-foreground">
-              // anything — the lesson, its page content, and any draft
+                      Configure how learners complete this lesson — optional, sensible defaults apply automatically. This is created together with the rest of the lesson when you finish.
-              // requirements are all created together in one shot here.
+                    </p>
-              <Button type="button" onClick={handleCreate} disabled={loading}>
+                    <DraftRequirementsEditor
-                {loading && <Spinner className="h-4 w-4 mr-2" />}
+                      entityType="lesson"
-                Create Lesson
+                      items={requirements}
-              </Button>
+                      onChange={setRequirements}
-            )}
+                      blockTypes={(getValues("blocks") ?? []).map((b) => b.type)}
-          </div>
+                    />
+                  </div>
+                )}
+              </div>
+
+              <div className="flex justify-between gap-3">
+                <Button type="button" variant="outline" onClick={handleBack} disabled={loading}>
+                  <ChevronLeft className="h-4 w-4 mr-1" />
+                  {step === 0 ? "Cancel" : "Back"}
+                </Button>
+
+                {step < 2 ? (
+                  <Button type="button" onClick={handleNext}>
+                    Next
+                    <ChevronRight className="h-4 w-4 ml-1" />
+                  </Button>
+                ) : (
+                  // Only the true final step (Requirements) actually persists
+                  // anything — the lesson, its page content, and any draft
+                  // requirements are all created together in one shot here.
+                  <Button type="button" onClick={handleCreate} disabled={loading}>
+                    {loading && <Spinner className="h-4 w-4 mr-2" />}
+                    Create Lesson
+                  </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 && (