Add lesson progress tracking

- Toggle lesson completion via server action (LessonProgress table) - "Отметить как пройденный" button on lesson page, turns accent when done - Course sidebar: progress bar, checkmarks on completed lessons, X/Y counter per module - Dashboard: progress bar on each course card with completion percentage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-07 13:16:28 +05:00
parent c88b5d2004
commit d0c8c6dd53
6 changed files with 257 additions and 67 deletions
@@ -47,9 +47,20 @@ export default async function CourseLayout({ children, params }: Props) {
    }
  }

+  // Fetch completed lesson IDs for this user
+  const allLessonIds = course.modules.flatMap((m) => m.lessons.map((l) => l.id));
+  const progressRecords = isAdmin
+    ? []
+    : await prisma.lessonProgress.findMany({
+        where: { userId: session.user.id, lessonId: { in: allLessonIds } },
+        select: { lessonId: true },
+      });
+
+  const completedLessonIds = new Set(progressRecords.map((p) => p.lessonId));
+
  return (
    <div className="flex flex-1">
-      <CourseSidebar course={course} />
+      <CourseSidebar course={course} completedLessonIds={completedLessonIds} />
      <main className="flex-1 min-w-0 overflow-y-auto">
        {children}
      </main>
@@ -0,0 +1,29 @@
+"use server";
+
+import { prisma } from "@/lib/prisma";
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+import { revalidatePath } from "next/cache";
+
+export async function toggleLessonProgress(lessonId: string, slug: string) {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) throw new Error("Unauthorized");
+
+  const existing = await prisma.lessonProgress.findUnique({
+    where: { userId_lessonId: { userId: session.user.id, lessonId } },
+  });
+
+  if (existing) {
+    await prisma.lessonProgress.delete({
+      where: { userId_lessonId: { userId: session.user.id, lessonId } },
+    });
+  } else {
+    await prisma.lessonProgress.create({
+      data: { userId: session.user.id, lessonId },
+    });
+  }
+
+  revalidatePath(`/courses/${slug}/lessons/${lessonId}`);
+  revalidatePath(`/courses/${slug}`);
+  revalidatePath("/dashboard");
+}
@@ -5,6 +5,7 @@ import { headers } from "next/headers";
 import { auth } from "@/lib/auth";
 import { KinescopePlayer } from "@/components/player/kinescope-player";
 import { LessonContent } from "@/components/student/lesson-content";
+import { LessonCompleteButton } from "@/components/student/lesson-complete-button";

 interface Props {
  params: Promise<{ slug: string; lessonId: string }>;
@@ -16,21 +17,23 @@ export default async function LessonPage({ params }: Props) {
  const session = await auth.api.getSession({ headers: await headers() });
  const isAdmin = session?.user.role === "admin";

-  const lesson = await prisma.lesson.findUnique({
-    where: { id: lessonId, ...(isAdmin ? {} : { published: true }) },
-    include: {
-      files: { orderBy: { createdAt: "asc" } },
-      module: {
-        include: {
-          course: {
-            include: {
-              modules: {
-                orderBy: { order: "asc" },
-                include: {
-                  lessons: {
-                    where: { published: true },
-                    orderBy: { order: "asc" },
-                    select: { id: true, title: true },
+  const [lesson, progress] = await Promise.all([
+    prisma.lesson.findUnique({
+      where: { id: lessonId, ...(isAdmin ? {} : { published: true }) },
+      include: {
+        files: { orderBy: { createdAt: "asc" } },
+        module: {
+          include: {
+            course: {
+              include: {
+                modules: {
+                  orderBy: { order: "asc" },
+                  include: {
+                    lessons: {
+                      where: { published: true },
+                      orderBy: { order: "asc" },
+                      select: { id: true, title: true },
+                    },
                  },
                },
              },
@@ -38,11 +41,18 @@ export default async function LessonPage({ params }: Props) {
          },
        },
      },
-    },
-  });
+    }),
+    session && !isAdmin
+      ? prisma.lessonProgress.findUnique({
+          where: { userId_lessonId: { userId: session.user.id, lessonId } },
+        })
+      : null,
+  ]);

  if (!lesson || lesson.module.course.slug !== slug) notFound();

+  const isCompleted = !!progress;
+
  // Build ordered flat list of all lessons for prev/next
  const allLessons = lesson.module.course.modules.flatMap((m) => m.lessons);
  const idx = allLessons.findIndex((l) => l.id === lessonId);
@@ -108,7 +118,7 @@ export default async function LessonPage({ params }: Props) {
        </div>
      )}

-      {/* Prev / Next navigation */}
+      {/* Complete button + Prev/Next navigation */}
      <div
        className="flex items-center justify-between pt-6 mt-6"
        style={{ borderTop: "2px solid var(--border)" }}
@@ -116,23 +126,28 @@ export default async function LessonPage({ params }: Props) {
        {prevLesson ? (
          <Link
            href={`/courses/${slug}/lessons/${prevLesson.id}`}
-            className="btn-aubade text-sm max-w-[45%]"
+            className="btn-aubade text-sm max-w-[40%]"
          >
            ← {prevLesson.title}
          </Link>
        ) : (
          <div />
        )}
+
+        {!isAdmin && (
+          <LessonCompleteButton lessonId={lessonId} slug={slug} isCompleted={isCompleted} />
+        )}
+
        {nextLesson ? (
          <Link
            href={`/courses/${slug}/lessons/${nextLesson.id}`}
-            className="btn-aubade btn-aubade-accent text-sm max-w-[45%] text-right"
+            className="btn-aubade btn-aubade-accent text-sm max-w-[40%] text-right"
          >
            {nextLesson.title} →
          </Link>
        ) : (
          <div className="text-sm" style={{ color: "var(--muted-foreground)" }}>
-            Последний урок курса
+            {isAdmin ? "Последний урок курса" : ""}
          </div>
        )}
      </div>
@@ -14,7 +14,12 @@ export default async function StudentDashboard() {
      course: {
        include: {
          modules: {
-            include: { _count: { select: { lessons: true } } },
+            include: {
+              lessons: {
+                where: { published: true },
+                select: { id: true },
+              },
+            },
          },
          _count: { select: { modules: true } },
        },
@@ -27,6 +32,18 @@ export default async function StudentDashboard() {
  const active = enrollments.filter((e) => !e.expiresAt || e.expiresAt > now);
  const expired = enrollments.filter((e) => e.expiresAt && e.expiresAt <= now);

+  // Fetch progress for all lessons in active courses
+  const allLessonIds = active.flatMap((e) =>
+    e.course.modules.flatMap((m) => m.lessons.map((l) => l.id))
+  );
+  const progressRecords = allLessonIds.length > 0
+    ? await prisma.lessonProgress.findMany({
+        where: { userId: session.user.id, lessonId: { in: allLessonIds } },
+        select: { lessonId: true },
+      })
+    : [];
+  const completedSet = new Set(progressRecords.map((p) => p.lessonId));
+
  return (
    <main className="max-w-4xl mx-auto px-6 py-10 w-full">
      <h1 className="text-2xl font-bold mb-1">Мои курсы</h1>
@@ -45,7 +62,14 @@ export default async function StudentDashboard() {
      ) : (
        <div className="grid gap-4 sm:grid-cols-2">
          {active.map(({ course, expiresAt }) => {
-            const totalLessons = course.modules.reduce((s, m) => s + m._count.lessons, 0);
+            const totalLessons = course.modules.reduce((s, m) => s + m.lessons.length, 0);
+            const completedLessons = course.modules
+              .flatMap((m) => m.lessons)
+              .filter((l) => completedSet.has(l.id)).length;
+            const progressPct = totalLessons > 0
+              ? Math.round((completedLessons / totalLessons) * 100)
+              : 0;
+
            return (
              <Link
                key={course.id}
@@ -60,23 +84,46 @@ export default async function StudentDashboard() {
                    📚
                  </div>
                )}
-                <div className="p-4 flex-1">
+                <div className="p-4 flex-1 flex flex-col gap-2">
                  <h2 className="font-bold text-base leading-tight">{course.title}</h2>
                  {course.description && (
-                    <p className="text-xs mt-1 line-clamp-2" style={{ color: "var(--muted-foreground)" }}>
+                    <p className="text-xs line-clamp-2" style={{ color: "var(--muted-foreground)" }}>
                      {course.description}
                    </p>
                  )}
-                  <div className="flex items-center justify-between mt-3">
-                    <span className="text-xs" style={{ color: "var(--muted-foreground)" }}>
-                      {course._count.modules} модулей · {totalLessons} уроков
-                    </span>
-                    {expiresAt && (
-                      <span className="text-xs" style={{ color: "var(--muted-foreground)" }}>
-                        до {new Date(expiresAt).toLocaleDateString("ru-RU")}
-                      </span>
-                    )}
-                  </div>
+
+                  {/* Progress bar */}
+                  {totalLessons > 0 && (
+                    <div className="mt-auto">
+                      <div className="flex items-center justify-between mb-1">
+                        <span className="text-xs" style={{ color: "var(--muted-foreground)" }}>
+                          {completedLessons} из {totalLessons} уроков
+                        </span>
+                        <span
+                          className="text-xs font-bold"
+                          style={{ color: progressPct === 100 ? "var(--foreground)" : "var(--muted-foreground)" }}
+                        >
+                          {progressPct === 100 ? "✓ Завершён" : `${progressPct}%`}
+                        </span>
+                      </div>
+                      <div className="h-1.5 w-full" style={{ background: "var(--border)" }}>
+                        <div
+                          className="h-full transition-all"
+                          style={{
+                            width: `${progressPct}%`,
+                            background: progressPct === 100 ? "var(--foreground)" : "var(--accent)",
+                            border: progressPct > 0 ? "1px solid var(--foreground)" : "none",
+                          }}
+                        />
+                      </div>
+                    </div>
+                  )}
+
+                  {expiresAt && (
+                    <p className="text-xs" style={{ color: "var(--muted-foreground)" }}>
+                      Доступ до {new Date(expiresAt).toLocaleDateString("ru-RU")}
+                    </p>
+                  )}
                </div>
              </Link>
            );
@@ -21,10 +21,22 @@ interface Course {
  modules: Module[];
 }

-export function CourseSidebar({ course }: { course: Course }) {
+export function CourseSidebar({
+  course,
+  completedLessonIds = new Set(),
+}: {
+  course: Course;
+  completedLessonIds?: Set<string>;
+}) {
  const pathname = usePathname();
  const [open, setOpen] = useState(true);

+  const totalLessons = course.modules.reduce((s, m) => s + m.lessons.length, 0);
+  const completedCount = course.modules
+    .flatMap((m) => m.lessons)
+    .filter((l) => completedLessonIds.has(l.id)).length;
+  const progressPct = totalLessons > 0 ? Math.round((completedCount / totalLessons) * 100) : 0;
+
  return (
    <>
      {/* Mobile toggle */}
@@ -45,54 +57,101 @@ export function CourseSidebar({ course }: { course: Course }) {
          top: "53px",
        }}
      >
-        {/* Course title */}
+        {/* Course title + progress */}
        <div className="px-4 py-4" style={{ borderBottom: "2px solid var(--border)" }}>
          <Link
            href={`/courses/${course.slug}`}
-            className="font-bold text-sm leading-snug block"
+            className="font-bold text-sm leading-snug block mb-1"
            style={{ color: "var(--foreground)" }}
          >
            {course.title}
          </Link>
          <Link
            href="/dashboard"
-            className="text-xs mt-1 block underline"
+            className="text-xs block underline mb-3"
            style={{ color: "var(--muted-foreground)" }}
          >
            ← Все курсы
          </Link>
+
+          {totalLessons > 0 && (
+            <div>
+              <div className="flex items-center justify-between mb-1">
+                <span className="text-xs" style={{ color: "var(--muted-foreground)" }}>
+                  {completedCount} из {totalLessons} уроков
+                </span>
+                <span className="text-xs font-bold" style={{ color: "var(--foreground)" }}>
+                  {progressPct}%
+                </span>
+              </div>
+              <div
+                className="h-1.5 w-full"
+                style={{ background: "var(--border)" }}
+              >
+                <div
+                  className="h-full transition-all duration-300"
+                  style={{
+                    width: `${progressPct}%`,
+                    background: progressPct === 100 ? "var(--foreground)" : "var(--accent)",
+                    border: progressPct > 0 ? "1px solid var(--foreground)" : "none",
+                  }}
+                />
+              </div>
+            </div>
+          )}
        </div>

        {/* Modules and lessons */}
        <nav className="flex-1 py-2">
-          {course.modules.map((mod) => (
-            <div key={mod.id}>
-              <p
-                className="px-4 py-2 text-xs font-bold uppercase tracking-widest"
-                style={{ color: "var(--muted-foreground)" }}
-              >
-                {mod.title}
-              </p>
-              {mod.lessons.map((lesson) => {
-                const active = pathname.includes(lesson.id);
-                return (
-                  <Link
-                    key={lesson.id}
-                    href={`/courses/${course.slug}/lessons/${lesson.id}`}
-                    className="block px-4 py-2 text-sm leading-snug border-l-2 transition-colors"
-                    style={{
-                      borderLeftColor: active ? "var(--foreground)" : "transparent",
-                      backgroundColor: active ? "var(--color-highlight)" : "transparent",
-                      color: active ? "var(--foreground)" : "var(--foreground)",
-                      fontWeight: active ? 600 : 400,
-                    }}
+          {course.modules.map((mod) => {
+            const modCompleted = mod.lessons.filter((l) => completedLessonIds.has(l.id)).length;
+            return (
+              <div key={mod.id}>
+                <div className="flex items-center justify-between px-4 py-2">
+                  <p
+                    className="text-xs font-bold uppercase tracking-widest"
+                    style={{ color: "var(--muted-foreground)" }}
                  >
-                    {lesson.title}
-                  </Link>
-                );
-              })}
-            </div>
-          ))}
+                    {mod.title}
+                  </p>
+                  {mod.lessons.length > 0 && (
+                    <span className="text-xs" style={{ color: "var(--muted-foreground)" }}>
+                      {modCompleted}/{mod.lessons.length}
+                    </span>
+                  )}
+                </div>
+                {mod.lessons.map((lesson) => {
+                  const active = pathname.includes(lesson.id);
+                  const done = completedLessonIds.has(lesson.id);
+                  return (
+                    <Link
+                      key={lesson.id}
+                      href={`/courses/${course.slug}/lessons/${lesson.id}`}
+                      className="flex items-center gap-2 px-4 py-2 text-sm leading-snug border-l-2 transition-colors"
+                      style={{
+                        borderLeftColor: active ? "var(--foreground)" : "transparent",
+                        backgroundColor: active ? "var(--color-highlight)" : "transparent",
+                        fontWeight: active ? 600 : 400,
+                        color: done && !active ? "var(--muted-foreground)" : "var(--foreground)",
+                      }}
+                    >
+                      <span
+                        className="shrink-0 w-4 h-4 flex items-center justify-center text-xs"
+                        style={{
+                          border: `1.5px solid ${done ? "var(--foreground)" : "var(--border)"}`,
+                          background: done ? "var(--foreground)" : "transparent",
+                          color: "var(--background)",
+                        }}
+                      >
+                        {done && "✓"}
+                      </span>
+                      <span className="flex-1 leading-snug">{lesson.title}</span>
+                    </Link>
+                  );
+                })}
+              </div>
+            );
+          })}
        </nav>
      </aside>
    </>
@@ -0,0 +1,29 @@
+"use client";
+
+import { useTransition } from "react";
+import { Check } from "lucide-react";
+import { toggleLessonProgress } from "@/app/(student)/courses/[slug]/lessons/[lessonId]/actions";
+
+export function LessonCompleteButton({
+  lessonId,
+  slug,
+  isCompleted,
+}: {
+  lessonId: string;
+  slug: string;
+  isCompleted: boolean;
+}) {
+  const [pending, startTransition] = useTransition();
+
+  return (
+    <button
+      onClick={() => startTransition(() => toggleLessonProgress(lessonId, slug))}
+      disabled={pending}
+      className={`btn-aubade ${isCompleted ? "btn-aubade-accent" : ""} flex items-center gap-2 px-5 py-2.5 text-sm`}
+      style={{ opacity: pending ? 0.6 : 1 }}
+    >
+      <Check size={15} strokeWidth={isCompleted ? 3 : 2} />
+      {pending ? "..." : isCompleted ? "Пройдено" : "Отметить как пройденный"}
+    </button>
+  );
+}