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>
This commit is contained in:
2026-04-07 13:16:28 +05:00
parent c88b5d2004
commit d0c8c6dd53
6 changed files with 257 additions and 67 deletions
@@ -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>
);
}