mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
597 lines
24 KiB
React
597 lines
24 KiB
React
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useForm, useFieldArray, useWatch } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
import { nanoid } from "nanoid";
|
|
import {
|
|
ArrowLeft, ChevronLeft, ChevronRight, Check,
|
|
FileText, BookOpen, LayoutTemplate, ClipboardCheck, ListChecks,
|
|
Plus, Trash2,
|
|
} from "lucide-react";
|
|
|
|
import { useLibrary } from "@/contexts/AdminLibraryContext";
|
|
import { useCourses } from "@/contexts/AdminCoursesContext";
|
|
import DraftRequirementsEditor, { DraftRequirementsSummary } from "@/modules/admin/components/courses/DraftRequirementsEditor";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { PageMeta } from "@/contexts/MetadataContext";
|
|
import api from "@/utils/api.util";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import {
|
|
Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription,
|
|
DrawerFooter, DrawerClose,
|
|
} from "@/components/ui/drawer";
|
|
import { BlockList, DEFAULT_CONTENT } from "@/components/generic/BlockList";
|
|
import { AddBlockMenu } from "@/components/generic/AddBlockMenu";
|
|
import { PreviewContent, PreviewChrome } from "../../../components/courses/LessonsPreview";
|
|
import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
|
|
|
|
function makeBlock(type) {
|
|
return { id: nanoid(), type, content: { ...DEFAULT_CONTENT[type] } };
|
|
}
|
|
|
|
// ─── Schema ───────────────────────────────────────────────────────────────────
|
|
const lessonSchema = z.object({
|
|
title: z.string().min(1, "Title is required."),
|
|
description: z.string().optional(),
|
|
objectives: z.array(
|
|
z.object({ value: z.string().min(1, "Objective cannot be empty.") })
|
|
).optional(),
|
|
blocks: z.array(z.any()).optional(),
|
|
});
|
|
|
|
const schema = z.object({
|
|
title: z.string().min(1, "Title is required."),
|
|
description: z.string().optional(),
|
|
subscription: z.string().optional(),
|
|
lessons: z.array(lessonSchema).optional(),
|
|
});
|
|
|
|
const DEFAULT_VALUES = {
|
|
title: "",
|
|
description: "",
|
|
subscription: "",
|
|
lessons: [],
|
|
};
|
|
|
|
const STEPS = [
|
|
{ id: 0, label: "Create Unit", icon: FileText },
|
|
{ id: 1, label: "Lessons", icon: BookOpen },
|
|
{ id: 2, label: "Page Builder", icon: LayoutTemplate },
|
|
{ id: 3, label: "Requirements", icon: ListChecks },
|
|
{ id: 4, label: "Review", icon: ClipboardCheck },
|
|
];
|
|
|
|
// Fields validated with trigger() before advancing past each step.
|
|
// Empty array means "validate the whole form" (nothing new to check that step).
|
|
const STEP_FIELDS = [["title", "description", "subscription"], ["lessons"], [], []];
|
|
|
|
function FieldError({ message }) {
|
|
if (!message) return null;
|
|
return <p className="text-xs text-destructive mt-1">{message}</p>;
|
|
}
|
|
|
|
// ─── Step 1 — Create Unit ─────────────────────────────────────────────────────
|
|
function StepUnit({ register, errors, control, setValue, tierCategories }) {
|
|
const watchedSubscr = useWatch({ control, name: "subscription" });
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="title">Title <span className="text-destructive">*</span></Label>
|
|
<Input id="title" placeholder="Unit title" {...register("title")} />
|
|
<FieldError message={errors.title?.message} />
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="description">Description</Label>
|
|
<Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label>Subscription</Label>
|
|
<Select
|
|
value={watchedSubscr || "__open"}
|
|
onValueChange={(val) => setValue("subscription", val === "__open" ? "" : val, { shouldDirty: true })}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="No tier gate" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="__open">No tier gate (open)</SelectItem>
|
|
{tierCategories.map((c) => (
|
|
<SelectItem key={c.slug} value={c.slug}>
|
|
{c.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-xs text-muted-foreground">
|
|
Optional. Gates this unit directly, independent of any course it may later be attached to.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Step 2 — Lessons ──────────────────────────────────────────────────────────
|
|
function LessonObjectives({ control, register, lessonIndex }) {
|
|
const { fields, append, remove, insert, update } = useFieldArray({ control, name: `lessons.${lessonIndex}.objectives` });
|
|
|
|
const handleObjectivePaste = (e, oi) => {
|
|
const text = e.clipboardData.getData("text");
|
|
const lines = text.split(/\r\n|\r|\n/).map((l) => l.trim()).filter(Boolean);
|
|
if (lines.length <= 1) return;
|
|
e.preventDefault();
|
|
update(oi, { value: lines[0] });
|
|
lines.slice(1).forEach((line, i) => {
|
|
insert(oi + 1 + i, { value: line });
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs text-muted-foreground uppercase tracking-wide">Objectives</Label>
|
|
{fields.map((f, oi) => (
|
|
<div key={f.id} className="flex items-center gap-2">
|
|
<Input
|
|
{...register(`lessons.${lessonIndex}.objectives.${oi}.value`)}
|
|
placeholder="Learning objective"
|
|
onPaste={(e) => handleObjectivePaste(e, oi)}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-destructive shrink-0"
|
|
onClick={() => remove(oi)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
<Button type="button" variant="outline" size="sm" onClick={() => append({ value: "" })}>
|
|
<Plus className="h-3.5 w-3.5 mr-1" /> Add Objective
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StepLessons({ control, register, errors }) {
|
|
const { fields, append, remove } = useFieldArray({ control, name: "lessons" });
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{fields.length === 0 && (
|
|
<p className="text-sm text-muted-foreground">
|
|
No lessons yet. A unit can be created without any, but add one now if you'd like to build its content in this wizard.
|
|
</p>
|
|
)}
|
|
|
|
{fields.map((f, i) => (
|
|
<div key={f.id} className="border border-border rounded-lg p-4 space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-muted-foreground">Lesson {i + 1}</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-destructive h-7 px-2"
|
|
onClick={() => remove(i)}
|
|
>
|
|
Remove
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label>Title <span className="text-destructive">*</span></Label>
|
|
<Input {...register(`lessons.${i}.title`)} placeholder="Lesson title" />
|
|
<FieldError message={errors.lessons?.[i]?.title?.message} />
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label>Description</Label>
|
|
<Textarea rows={2} {...register(`lessons.${i}.description`)} placeholder="Optional description" />
|
|
</div>
|
|
|
|
<LessonObjectives control={control} register={register} lessonIndex={i} />
|
|
</div>
|
|
))}
|
|
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
className="w-full"
|
|
onClick={() => append({ title: "", description: "", objectives: [], blocks: [] })}
|
|
>
|
|
<Plus className="h-4 w-4 mr-1" /> Add Lesson
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Step 3 — Page Builder ─────────────────────────────────────────────────────
|
|
function StepPageBuilder({ control, setValue }) {
|
|
const lessons = useWatch({ control, name: "lessons" }) ?? [];
|
|
const [rawIndex, setActiveIndex] = useState(0);
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
|
|
if (lessons.length === 0) {
|
|
return (
|
|
<p className="text-sm text-muted-foreground">
|
|
Add at least one lesson in the previous step to build its page content here.
|
|
</p>
|
|
);
|
|
}
|
|
|
|
// Clamp instead of syncing via effect — a removed lesson (from the previous
|
|
// step) can leave rawIndex pointing past the end of the array.
|
|
const activeIndex = Math.min(rawIndex, lessons.length - 1);
|
|
const activeLesson = lessons[activeIndex];
|
|
const blocks = activeLesson?.blocks ?? [];
|
|
|
|
const setBlocks = (updater) => {
|
|
const next = typeof updater === "function" ? updater(blocks) : updater;
|
|
setValue(`lessons.${activeIndex}.blocks`, next, { shouldDirty: true });
|
|
};
|
|
|
|
const addBlock = (type) => setBlocks((prev) => [...prev, makeBlock(type)]);
|
|
const updateBlock = (id, content) => setBlocks((prev) => prev.map((b) => (b.id === id ? { ...b, content } : b)));
|
|
const deleteBlock = (id) => setBlocks((prev) => prev.filter((b) => b.id !== id));
|
|
const moveBlock = (id, direction) => setBlocks((prev) => {
|
|
const index = prev.findIndex((b) => b.id === id);
|
|
const swapIndex = direction === "up" ? index - 1 : index + 1;
|
|
if (swapIndex < 0 || swapIndex >= prev.length) return prev;
|
|
const next = [...prev];
|
|
[next[index], next[swapIndex]] = [next[swapIndex], next[index]];
|
|
return next;
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{lessons.map((l, i) => (
|
|
<div key={i} className="flex items-center justify-between border border-border rounded-lg p-4">
|
|
<div>
|
|
<p className="text-sm font-medium">{l.title || `Lesson ${i + 1}`}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{(l.blocks?.length ?? 0)} block{(l.blocks?.length ?? 0) !== 1 ? "s" : ""}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => { setActiveIndex(i); setDrawerOpen(true); }}
|
|
>
|
|
<LayoutTemplate className="h-4 w-4 mr-1.5" />
|
|
Open Page Builder
|
|
</Button>
|
|
</div>
|
|
))}
|
|
|
|
<Drawer open={drawerOpen} onOpenChange={setDrawerOpen} shouldScaleBackground>
|
|
<DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[90vh]">
|
|
<DrawerHeader className="border-b text-left">
|
|
<DrawerTitle>Page Builder</DrawerTitle>
|
|
<DrawerDescription>{activeLesson?.title || `Lesson ${activeIndex + 1}`}</DrawerDescription>
|
|
</DrawerHeader>
|
|
|
|
<div className="px-4 pt-3">
|
|
<Tabs value={String(activeIndex)} onValueChange={(v) => setActiveIndex(Number(v))}>
|
|
<TabsList className="flex-wrap h-auto">
|
|
{lessons.map((l, i) => (
|
|
<TabsTrigger key={i} value={String(i)} className="gap-1.5">
|
|
{l.title || `Lesson ${i + 1}`}
|
|
{l.blocks?.length > 0 && (
|
|
<Badge variant="secondary" className="text-[10px] px-1.5">{l.blocks.length}</Badge>
|
|
)}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
|
|
Editor
|
|
{blocks.length > 0 && (
|
|
<span className="text-xs font-normal">· {blocks.length} block{blocks.length !== 1 ? "s" : ""}</span>
|
|
)}
|
|
</div>
|
|
<BlockList blocks={blocks} onUpdate={updateBlock} onMove={moveBlock} onDelete={deleteBlock} />
|
|
<AddBlockMenu onAdd={addBlock} />
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="text-sm font-medium text-muted-foreground">Live Preview</div>
|
|
<PreviewChrome title={activeLesson.title}>
|
|
<div className="p-6 space-y-5 min-h-[300px]">
|
|
<PreviewContent
|
|
lesson={{
|
|
title: activeLesson.title,
|
|
description: activeLesson.description,
|
|
objectives: (activeLesson.objectives ?? []).map((o, oi) => ({ objective_id: oi, text: o.value })),
|
|
}}
|
|
blocks={blocks}
|
|
empty="Your content will appear here as you build."
|
|
/>
|
|
</div>
|
|
</PreviewChrome>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DrawerFooter className="border-t flex-row justify-end">
|
|
<DrawerClose asChild>
|
|
<Button type="button">Done</Button>
|
|
</DrawerClose>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Step 4 — Review ───────────────────────────────────────────────────────────
|
|
function SummaryRow({ label, value }) {
|
|
if (!value) return null;
|
|
return (
|
|
<div className="flex justify-between py-1.5 text-sm">
|
|
<span className="text-muted-foreground min-w-[140px]">{label}</span>
|
|
<span className="text-foreground text-right">{value}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StepReview({ data, tierCategories, requirements }) {
|
|
const tierName = tierCategories.find((c) => c.slug === data.subscription)?.name;
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="border border-border rounded-lg p-4 space-y-1">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<FileText className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-medium">Unit</span>
|
|
</div>
|
|
<SummaryRow label="Title" value={data.title} />
|
|
<SummaryRow label="Description" value={data.description} />
|
|
<SummaryRow label="Subscription" value={tierName || "No tier gate (open)"} />
|
|
</div>
|
|
|
|
{(data.lessons ?? []).length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">No lessons will be created with this unit.</p>
|
|
) : (
|
|
<div className="border border-border rounded-lg p-4 space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<BookOpen className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-medium">Lessons ({data.lessons.length})</span>
|
|
</div>
|
|
{data.lessons.map((l, i) => (
|
|
<div key={i} className="flex items-center justify-between text-sm border-t border-border pt-2 first:border-t-0 first:pt-0">
|
|
<span>{i + 1}. {l.title}</span>
|
|
<span className="text-muted-foreground text-xs">
|
|
{(l.objectives ?? []).filter((o) => o.value).length} objective(s) · {(l.blocks ?? []).length} block(s)
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<DraftRequirementsSummary entityType="unit" items={requirements} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Step 5 — Requirements ──────────────────────────────────────────────────────
|
|
function StepRequirements({ requirements, setRequirements }) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
Configure how learners complete this unit — optional, sensible defaults apply automatically. This is created together with the rest of the unit when you finish.
|
|
</p>
|
|
<DraftRequirementsEditor entityType="unit" items={requirements} onChange={setRequirements} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Main Page ──────────────────────────────────────────────────────────────
|
|
export default function AddLibraryUnit() {
|
|
const navigate = useNavigate();
|
|
const { createUnitFull, loading } = useLibrary();
|
|
const { user } = useAuth();
|
|
|
|
const { syncUnitRequirements } = useCourses();
|
|
|
|
const [step, setStep] = useState(0);
|
|
const [requirements, setRequirements] = useState([]);
|
|
const [tierCategories, setTierCategories] = useState([]);
|
|
|
|
useEffect(() => {
|
|
api.get("/admin/tiers/categories")
|
|
.then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
const {
|
|
register, control, trigger, getValues, setValue,
|
|
formState: { errors, isDirty },
|
|
} = useForm({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: DEFAULT_VALUES,
|
|
mode: "onTouched",
|
|
});
|
|
|
|
const { bypassOnce, dialog: unsavedChangesDialog } = useUnsavedChangesGuard(isDirty || requirements.length > 0);
|
|
|
|
const handleNext = async () => {
|
|
const fields = STEP_FIELDS[step];
|
|
const valid = await trigger(fields.length ? fields : undefined);
|
|
if (valid) setStep((s) => Math.min(s + 1, STEPS.length - 1));
|
|
};
|
|
|
|
const handleBack = () => {
|
|
if (step === 0) navigate("/admin/units");
|
|
else setStep((s) => s - 1);
|
|
};
|
|
|
|
// The one and only persistence point — nothing is created until this final
|
|
// click at Review, so Requirements (the step before it) is purely a draft
|
|
// form. No <form> tag wraps the wizard, so this is invoked manually.
|
|
const handleCreate = async () => {
|
|
const valid = await trigger();
|
|
if (!valid) return;
|
|
|
|
const data = getValues();
|
|
const payload = {
|
|
title: data.title,
|
|
description: data.description || null,
|
|
subscription: data.subscription || null,
|
|
lessons: (data.lessons ?? []).map((l) => ({
|
|
title: l.title,
|
|
description: l.description || null,
|
|
objectives: (l.objectives ?? []).map((o) => o.value).filter(Boolean),
|
|
blocks: l.blocks ?? [],
|
|
})),
|
|
createdBy: user?.user_id,
|
|
};
|
|
|
|
// Single request creates the unit, its lessons, objectives, and page
|
|
// content in one transaction — no per-lesson/per-page follow-up calls.
|
|
const result = await createUnitFull(payload);
|
|
const newUnitId = result?.data?.data?.unit_id;
|
|
if (!newUnitId) return;
|
|
|
|
if (requirements.length > 0) {
|
|
const clean = requirements.map(({ _key, ...r }) => r);
|
|
await syncUnitRequirements(null, newUnitId, clean);
|
|
}
|
|
|
|
bypassOnce();
|
|
navigate("/admin/units");
|
|
};
|
|
|
|
return (
|
|
<section className="bg-muted min-h-full">
|
|
<PageMeta title="Add Unit - STARR" />
|
|
<div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-center px-4 py-10">
|
|
<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={() => navigate("/admin/units")}>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-xl font-semibold">Create Unit</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Units are standalone — attach this one to any course later, or run it on its own.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stepper */}
|
|
<div className="flex items-center gap-0">
|
|
{STEPS.map((s, i) => {
|
|
const Icon = s.icon;
|
|
const isActive = step === i;
|
|
const isDone = step > i;
|
|
|
|
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>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Step content */}
|
|
<div className="rounded-lg border bg-card p-6 min-h-[320px]">
|
|
<h2 className="text-base font-medium mb-4">{STEPS[step].label}</h2>
|
|
|
|
{step === 0 && (
|
|
<StepUnit
|
|
register={register}
|
|
errors={errors}
|
|
control={control}
|
|
setValue={setValue}
|
|
tierCategories={tierCategories}
|
|
/>
|
|
)}
|
|
{step === 1 && (
|
|
<StepLessons control={control} register={register} errors={errors} />
|
|
)}
|
|
{step === 2 && (
|
|
<StepPageBuilder control={control} setValue={setValue} />
|
|
)}
|
|
{step === 3 && (
|
|
<StepRequirements requirements={requirements} setRequirements={setRequirements} />
|
|
)}
|
|
{step === 4 && (
|
|
<StepReview data={getValues()} tierCategories={tierCategories} requirements={requirements} />
|
|
)}
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<div className="flex items-center 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 < STEPS.length - 1 ? (
|
|
<Button type="button" onClick={handleNext}>
|
|
Next
|
|
<ChevronRight className="h-4 w-4 ml-1" />
|
|
</Button>
|
|
) : (
|
|
// Only the true final step (Review) actually persists anything —
|
|
// the unit, its lessons/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 Unit
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{unsavedChangesDialog}
|
|
</section>
|
|
);
|
|
}
|