admins/lms-sb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stage 1: Course/Module/Lesson CRUD admin UI with TipTap editor

Browse Source
This commit is contained in:
dmitriylaukhin
2026-04-07 11:36:27 +05:00
parent 9d82b73e58
commit d356dddc96
30 changed files with 2090 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/courses/[courseId]/actions.ts
+64
View File
@@ -0,0 +1,64 @@
"use server";
import { prisma } from "@/lib/prisma";
import { headers } from "next/headers";
import { auth } from "@/lib/auth";
import { revalidatePath } from "next/cache";
async function requireAdmin() {
const session = await auth.api.getSession({ headers: await headers() });
if (!session || session.user.role !== "admin") throw new Error("Forbidden");
}
// ── Modules ──────────────────────────────────────────────────────────────────
export async function createModule(courseId: string, formData: FormData) {
await requireAdmin();
const title = formData.get("title") as string;
const count = await prisma.module.count({ where: { courseId } });
await prisma.module.create({ data: { courseId, title, order: count } });
revalidatePath(`/admin/courses/${courseId}`);
}
export async function updateModule(moduleId: string, courseId: string, formData: FormData) {
await requireAdmin();
const title = formData.get("title") as string;
await prisma.module.update({ where: { id: moduleId }, data: { title } });
revalidatePath(`/admin/courses/${courseId}`);
}
export async function deleteModule(moduleId: string, courseId: string) {
await requireAdmin();
await prisma.module.delete({ where: { id: moduleId } });
revalidatePath(`/admin/courses/${courseId}`);
}
export async function reorderModules(courseId: string, orderedIds: string[]) {
await requireAdmin();
await Promise.all(
orderedIds.map((id, index) =>
prisma.module.update({ where: { id }, data: { order: index } })
)
);
revalidatePath(`/admin/courses/${courseId}`);
}
// ── Enrollment ───────────────────────────────────────────────────────────────
export async function grantAccess(courseId: string, userId: string) {
await requireAdmin();
await prisma.courseEnrollment.upsert({
where: { userId_courseId: { userId, courseId } },
update: {},
create: { userId, courseId },
});
revalidatePath(`/admin/courses/${courseId}`);
}
export async function revokeAccess(courseId: string, userId: string) {
await requireAdmin();
await prisma.courseEnrollment.delete({
where: { userId_courseId: { userId, courseId } },
});
revalidatePath(`/admin/courses/${courseId}`);
}
src/app/admin/courses/[courseId]/modules/[moduleId]/actions.ts
+43
View File
@@ -0,0 +1,43 @@
"use server";
import { prisma } from "@/lib/prisma";
import { headers } from "next/headers";
import { auth } from "@/lib/auth";
import { revalidatePath } from "next/cache";
async function requireAdmin() {
const session = await auth.api.getSession({ headers: await headers() });
if (!session || session.user.role !== "admin") throw new Error("Forbidden");
}
export async function createLesson(moduleId: string, courseId: string, formData: FormData) {
await requireAdmin();
const title = formData.get("title") as string;
const count = await prisma.lesson.count({ where: { moduleId } });
const lesson = await prisma.lesson.create({ data: { moduleId, title, order: count } });
revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
return lesson.id;
}
export async function updateLesson(lessonId: string, courseId: string, moduleId: string, formData: FormData) {
await requireAdmin();
const title = formData.get("title") as string;
await prisma.lesson.update({ where: { id: lessonId }, data: { title } });
revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
}
export async function deleteLesson(lessonId: string, courseId: string, moduleId: string) {
await requireAdmin();
await prisma.lesson.delete({ where: { id: lessonId } });
revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
}
export async function reorderLessons(moduleId: string, courseId: string, orderedIds: string[]) {
await requireAdmin();
await Promise.all(
orderedIds.map((id, index) =>
prisma.lesson.update({ where: { id }, data: { order: index } })
)
);
revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
}
src/app/admin/courses/[courseId]/modules/[moduleId]/lessons/[lessonId]/actions.ts
+36
View File
@@ -0,0 +1,36 @@
"use server";
import { prisma } from "@/lib/prisma";
import { headers } from "next/headers";
import { auth } from "@/lib/auth";
import { revalidatePath } from "next/cache";
async function requireAdmin() {
const session = await auth.api.getSession({ headers: await headers() });
if (!session || session.user.role !== "admin") throw new Error("Forbidden");
}
export async function saveLesson(
lessonId: string,
courseId: string,
moduleId: string,
data: {
title: string;
kinescopeId: string;
content: object;
published: boolean;
}
) {
await requireAdmin();
await prisma.lesson.update({
where: { id: lessonId },
data: {
title: data.title,
kinescopeId: data.kinescopeId || null,
content: data.content,
published: data.published,
},
});
revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}`);
revalidatePath(`/admin/courses/${courseId}/modules/${moduleId}/lessons/${lessonId}`);
}
src/app/admin/courses/[courseId]/modules/[moduleId]/lessons/[lessonId]/page.tsx
+53
View File
@@ -0,0 +1,53 @@
import { prisma } from "@/lib/prisma";
import { notFound } from "next/navigation";
import Link from "next/link";
import { LessonEditor } from "@/components/admin/lesson-editor";
interface Props {
params: Promise<{ courseId: string; moduleId: string; lessonId: string }>;
}
export default async function LessonEditorPage({ params }: Props) {
const { courseId, moduleId, lessonId } = await params;
const lesson = await prisma.lesson.findUnique({
where: { id: lessonId },
include: {
module: {
include: { course: { select: { title: true } } },
},
},
});
if (!lesson || lesson.moduleId !== moduleId) notFound();
return (
<div className="p-8 max-w-4xl">
<nav className="text-sm text-slate-400 mb-6">
<Link href="/admin/courses" className="hover:text-slate-600">Курсы</Link>
<span className="mx-2">/</span>
<Link href={`/admin/courses/${courseId}`} className="hover:text-slate-600">
{lesson.module.course.title}
</Link>
<span className="mx-2">/</span>
<Link href={`/admin/courses/${courseId}/modules/${moduleId}`} className="hover:text-slate-600">
{lesson.module.title}
</Link>
<span className="mx-2">/</span>
<span className="text-slate-700">{lesson.title}</span>
</nav>
<LessonEditor
lesson={{
id: lesson.id,
title: lesson.title,
kinescopeId: lesson.kinescopeId ?? "",
content: lesson.content as object ?? {},
published: lesson.published,
}}
courseId={courseId}
moduleId={moduleId}
/>
</div>
);
}
src/app/admin/courses/[courseId]/modules/[moduleId]/page.tsx
+46
View File
@@ -0,0 +1,46 @@
import { prisma } from "@/lib/prisma";
import { notFound } from "next/navigation";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { SortableLessons } from "@/components/admin/sortable-lessons";
interface Props {
params: Promise<{ courseId: string; moduleId: string }>;
}
export default async function ModulePage({ params }: Props) {
const { courseId, moduleId } = await params;
const module = await prisma.module.findUnique({
where: { id: moduleId },
include: {
course: { select: { title: true } },
lessons: { orderBy: { order: "asc" } },
},
});
if (!module || module.courseId !== courseId) notFound();
return (
<div className="p-8 max-w-3xl">
<nav className="text-sm text-slate-400 mb-6">
<Link href="/admin/courses" className="hover:text-slate-600">Курсы</Link>
<span className="mx-2">/</span>
<Link href={`/admin/courses/${courseId}`} className="hover:text-slate-600">{module.course.title}</Link>
<span className="mx-2">/</span>
<span className="text-slate-700">{module.title}</span>
</nav>
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-semibold text-slate-800">{module.title}</h1>
<p className="text-slate-500 text-sm mt-0.5">{module.lessons.length} уроков</p>
</div>
</div>
<section className="bg-white border border-slate-200 rounded-2xl p-6">
<SortableLessons courseId={courseId} moduleId={moduleId} lessons={module.lessons} />
</section>
</div>
);
}
src/app/admin/courses/[courseId]/page.tsx
+72
View File
@@ -0,0 +1,72 @@
import { prisma } from "@/lib/prisma";
import { notFound } from "next/navigation";
import Link from "next/link";
import { CourseEditForm } from "@/components/admin/course-edit-form";
import { SortableModules } from "@/components/admin/sortable-modules";
import { EnrollmentManager } from "@/components/admin/enrollment-manager";
interface Props {
params: Promise<{ courseId: string }>;
}
export default async function CourseDetailPage({ params }: Props) {
const { courseId } = await params;
const [course, allStudents] = await Promise.all([
prisma.course.findUnique({
where: { id: courseId },
include: {
modules: {
orderBy: { order: "asc" },
include: { _count: { select: { lessons: true } } },
},
enrollments: { include: { user: { select: { id: true, name: true, email: true } } } },
},
}),
prisma.user.findMany({
where: { role: "student" },
select: { id: true, name: true, email: true },
orderBy: { name: "asc" },
}),
]);
if (!course) notFound();
const enrolledIds = new Set(course.enrollments.map((e) => e.userId));
return (
<div className="p-8 max-w-4xl">
{/* Breadcrumb */}
<nav className="text-sm text-slate-400 mb-6">
<Link href="/admin/courses" className="hover:text-slate-600">Курсы</Link>
<span className="mx-2">/</span>
<span className="text-slate-700">{course.title}</span>
</nav>
{/* Course metadata */}
<section className="bg-white border border-slate-200 rounded-2xl p-6 mb-6">
<h2 className="text-base font-semibold text-slate-700 mb-4">Основная информация</h2>
<CourseEditForm course={course} />
</section>
{/* Modules */}
<section className="bg-white border border-slate-200 rounded-2xl p-6 mb-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-base font-semibold text-slate-700">Модули</h2>
<span className="text-sm text-slate-400">{course.modules.length} модулей</span>
</div>
<SortableModules courseId={courseId} modules={course.modules} />
</section>
{/* Access management */}
<section className="bg-white border border-slate-200 rounded-2xl p-6">
<h2 className="text-base font-semibold text-slate-700 mb-4">Доступ к курсу</h2>
<EnrollmentManager
courseId={courseId}
allStudents={allStudents}
enrolledIds={[...enrolledIds]}
/>
</section>
</div>
);
}
src/app/admin/courses/actions.ts
+62
View File
@@ -0,0 +1,62 @@
"use server";
import { prisma } from "@/lib/prisma";
import { headers } from "next/headers";
import { auth } from "@/lib/auth";
import { redirect } from "next/navigation";
import { revalidatePath } from "next/cache";
async function requireAdmin() {
const session = await auth.api.getSession({ headers: await headers() });
if (!session || session.user.role !== "admin") throw new Error("Forbidden");
}
function slugify(str: string): string {
const map: Record<string, string> = {
а:"a",б:"b",в:"v",г:"g",д:"d",е:"e",ё:"yo",ж:"zh",з:"z",и:"i",й:"y",
к:"k",л:"l",м:"m",н:"n",о:"o",п:"p",р:"r",с:"s",т:"t",у:"u",ф:"f",
х:"kh",ц:"ts",ч:"ch",ш:"sh",щ:"shch",ъ:"",ы:"y",ь:"",э:"e",ю:"yu",я:"ya",
};
return str.toLowerCase()
.replace(/[а-яё]/g, (c) => map[c] ?? c)
.replace(/[^a-z0-9]+/g, "-")
.replace(/^-|-$/g, "");
}
export async function createCourse(formData: FormData) {
await requireAdmin();
const title = formData.get("title") as string;
const slug = (formData.get("slug") as string).trim() || slugify(title);
const description = (formData.get("description") as string) || null;
const course = await prisma.course.create({
data: { title, slug, description },
});
revalidatePath("/admin/courses");
redirect(`/admin/courses/${course.id}`);
}
export async function updateCourse(courseId: string, formData: FormData) {
await requireAdmin();
const title = formData.get("title") as string;
const slug = formData.get("slug") as string;
const description = (formData.get("description") as string) || null;
const published = formData.get("published") === "true";
const coverImage = (formData.get("coverImage") as string) || null;
await prisma.course.update({
where: { id: courseId },
data: { title, slug, description, published, coverImage },
});
revalidatePath("/admin/courses");
revalidatePath(`/admin/courses/${courseId}`);
}
export async function deleteCourse(courseId: string) {
await requireAdmin();
await prisma.course.delete({ where: { id: courseId } });
revalidatePath("/admin/courses");
redirect("/admin/courses");
}
src/app/admin/courses/page.tsx
+56
View File
@@ -0,0 +1,56 @@
import { prisma } from "@/lib/prisma";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { CreateCourseDialog } from "@/components/admin/create-course-dialog";
export default async function CoursesPage() {
const courses = await prisma.course.findMany({
orderBy: { order: "asc" },
include: { _count: { select: { modules: true, enrollments: true } } },
});
return (
<div className="p-8">
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-semibold text-slate-800">Курсы</h1>
<p className="text-slate-500 text-sm mt-0.5">{courses.length} курсов</p>
</div>
<CreateCourseDialog />
</div>
{courses.length === 0 ? (
<div className="bg-white border border-slate-200 rounded-2xl p-12 text-center">
<p className="text-4xl mb-3">📚</p>
<p className="text-slate-600 font-medium">Курсов пока нет</p>
<p className="text-slate-400 text-sm mt-1">Создайте первый курс</p>
</div>
) : (
<div className="space-y-2">
{courses.map((course) => (
<Link
key={course.id}
href={`/admin/courses/${course.id}`}
className="flex items-center justify-between bg-white border border-slate-200 rounded-xl px-5 py-4 hover:border-amber-300 transition-colors group"
>
<div className="flex items-center gap-3">
<div>
<p className="font-medium text-slate-800 group-hover:text-amber-700">{course.title}</p>
<p className="text-xs text-slate-400 mt-0.5">/{course.slug}</p>
</div>
</div>
<div className="flex items-center gap-4">
<span className="text-sm text-slate-400">{course._count.modules} модулей</span>
<span className="text-sm text-slate-400">{course._count.enrollments} учеников</span>
<Badge variant={course.published ? "default" : "secondary"}>
{course.published ? "Опубликован" : "Черновик"}
</Badge>
</div>
</Link>
))}
</div>
)}
</div>
);
}
src/app/admin/dashboard/page.tsx
+21 -40
View File
@@ -1,46 +1,27 @@
import { headers } from "next/headers";
import { auth } from "@/lib/auth";
import { redirect } from "next/navigation";
import { LogoutButton } from "@/components/layout/logout-button";
export default async function AdminDashboard() {
const session = await auth.api.getSession({ headers: await headers() });
if (!session) redirect("/login");
if (session.user.role !== "admin") redirect("/dashboard");
import Link from "next/link";
export default function AdminDashboard() {
return (
<div className="min-h-screen bg-slate-50">
<header className="bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between">
<h1 className="text-xl font-bold text-slate-900">Second Brain — Админ</h1>
<div className="flex items-center gap-4">
<span className="text-sm text-gray-600">{session.user.name}</span>
<LogoutButton />
<div className="p-8">
<h1 className="text-2xl font-semibold text-slate-800 mb-1">Обзор</h1>
<p className="text-slate-500 mb-8">Управление платформой Second Brain.</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Link href="/admin/courses" className="bg-white rounded-2xl border border-slate-200 p-6 hover:border-amber-300 transition-colors">
<p className="text-3xl mb-2">📚</p>
<p className="font-medium text-slate-800">Курсы</p>
<p className="text-sm text-slate-400 mt-1">Управление контентом</p>
</Link>
<Link href="/admin/users" className="bg-white rounded-2xl border border-slate-200 p-6 hover:border-amber-300 transition-colors">
<p className="text-3xl mb-2">👥</p>
<p className="font-medium text-slate-800">Пользователи</p>
<p className="text-sm text-slate-400 mt-1">Управление доступом</p>
</Link>
<div className="bg-white rounded-2xl border border-slate-200 p-6 opacity-50">
<p className="text-3xl mb-2">📊</p>
<p className="font-medium text-slate-800">Аналитика</p>
<p className="text-sm text-slate-400 mt-1">Этап 10</p>
</div>
</header>
<main className="max-w-5xl mx-auto px-6 py-10">
<h2 className="text-2xl font-semibold text-gray-800 mb-2">
Панель администратора
</h2>
<p className="text-gray-500 mb-8">Управление платформой Second Brain.</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-white rounded-2xl border border-slate-200 p-6">
<p className="text-3xl mb-2">📚</p>
<p className="font-medium text-gray-800">Курсы</p>
<p className="text-sm text-gray-400 mt-1">CRUD — Этап 1</p>
</div>
<div className="bg-white rounded-2xl border border-slate-200 p-6">
<p className="text-3xl mb-2">👥</p>
<p className="font-medium text-gray-800">Пользователи</p>
<p className="text-sm text-gray-400 mt-1">Управление — Этап 1</p>
</div>
<div className="bg-white rounded-2xl border border-slate-200 p-6">
<p className="text-3xl mb-2">📊</p>
<p className="font-medium text-gray-800">Аналитика</p>
<p className="text-sm text-gray-400 mt-1">Этап 10</p>
</div>
</div>
</main>
</div>
</div>
);
}
src/app/admin/layout.tsx
+30
View File
@@ -0,0 +1,30 @@
import { headers } from "next/headers";
import { auth } from "@/lib/auth";
import { redirect } from "next/navigation";
import { AdminNav } from "@/components/admin/admin-nav";
import { LogoutButton } from "@/components/layout/logout-button";
export default async function AdminLayout({ children }: { children: React.ReactNode }) {
const session = await auth.api.getSession({ headers: await headers() });
if (!session) redirect("/login");
if (session.user.role !== "admin") redirect("/dashboard");
return (
<div className="min-h-screen flex bg-slate-50">
<aside className="w-56 bg-slate-900 text-white flex flex-col shrink-0 fixed h-full z-10">
<div className="px-5 py-5 border-b border-slate-800">
<p className="font-bold text-amber-400 text-base">Second Brain</p>
<p className="text-xs text-slate-400 mt-0.5">Админ-панель</p>
</div>
<nav className="flex-1 p-3 space-y-0.5 overflow-y-auto">
<AdminNav />
</nav>
<div className="p-4 border-t border-slate-800">
<p className="text-xs text-slate-400 mb-3 truncate">{session.user.name}</p>
<LogoutButton />
</div>
</aside>
<div className="ml-56 flex-1 min-h-screen">{children}</div>
</div>
);
}
src/app/admin/users/page.tsx
+70
View File
@@ -0,0 +1,70 @@
import { prisma } from "@/lib/prisma";
import { Badge } from "@/components/ui/badge";
const roleLabel: Record<string, string> = {
admin: "Администратор",
curator: "Куратор",
student: "Ученик",
};
const roleVariant: Record<string, "default" | "secondary" | "outline"> = {
admin: "default",
curator: "secondary",
student: "outline",
};
export default async function UsersPage() {
const users = await prisma.user.findMany({
orderBy: { createdAt: "desc" },
include: { _count: { select: { enrollments: true } } },
});
return (
<div className="p-8">
<div className="mb-6">
<h1 className="text-2xl font-semibold text-slate-800">Пользователи</h1>
<p className="text-slate-500 text-sm mt-0.5">{users.length} пользователей</p>
</div>
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden">
<table className="w-full">
<thead>
<tr className="border-b border-slate-100 bg-slate-50">
<th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase">Пользователь</th>
<th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase">Роль</th>
<th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase">Курсов</th>
<th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase">Email подтверждён</th>
<th className="text-left px-5 py-3 text-xs font-medium text-slate-500 uppercase">Зарегистрирован</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id} className="border-b border-slate-50 last:border-0 hover:bg-slate-50">
<td className="px-5 py-3">
<p className="font-medium text-slate-800">{user.name}</p>
<p className="text-xs text-slate-400">{user.email}</p>
</td>
<td className="px-5 py-3">
<Badge variant={roleVariant[user.role] ?? "outline"}>
{roleLabel[user.role] ?? user.role}
</Badge>
</td>
<td className="px-5 py-3 text-sm text-slate-600">
{user._count.enrollments}
</td>
<td className="px-5 py-3">
<span className={`text-xs font-medium ${user.emailVerified ? "text-green-600" : "text-slate-400"}`}>
{user.emailVerified ? "Да" : "Нет"}
</span>
</td>
<td className="px-5 py-3 text-sm text-slate-400">
{new Date(user.createdAt).toLocaleDateString("ru-RU")}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}
src/app/api/admin/upload/route.ts
+23
View File
@@ -0,0 +1,23 @@
import { NextRequest, NextResponse } from "next/server";
import { headers } from "next/headers";
import { auth } from "@/lib/auth";
import { uploadFile } from "@/lib/s3";
import { randomUUID } from "crypto";
export async function POST(req: NextRequest) {
const session = await auth.api.getSession({ headers: await headers() });
if (!session || session.user.role !== "admin") {
return NextResponse.json({ error: "Forbidden" }, { status: 403 });
}
const form = await req.formData();
const file = form.get("file") as File | null;
if (!file) return NextResponse.json({ error: "No file" }, { status: 400 });
const ext = file.name.split(".").pop() ?? "bin";
const key = `uploads/${randomUUID()}.${ext}`;
const buffer = Buffer.from(await file.arrayBuffer());
const url = await uploadFile(key, buffer, file.type);
return NextResponse.json({ url, key });
}
src/app/globals.css
+1
View File
@@ -1,6 +1,7 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:is(.dark *));