Pending course, rest ready for launch
This commit is contained in:
Marcelo
@@ -5,6 +5,7 @@ type LoginPageProps = {
|
||||
redirectTo?: string | string[];
|
||||
role?: string | string[];
|
||||
forgot?: string | string[];
|
||||
switchUser?: string | string[];
|
||||
}>;
|
||||
};
|
||||
|
||||
@@ -16,6 +17,15 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
|
||||
const role = Array.isArray(roleValue) ? roleValue[0] : roleValue;
|
||||
const forgotValue = params.forgot;
|
||||
const forgot = Array.isArray(forgotValue) ? forgotValue[0] : forgotValue;
|
||||
const switchUserValue = params.switchUser;
|
||||
const switchUser = Array.isArray(switchUserValue) ? switchUserValue[0] : switchUserValue;
|
||||
|
||||
return <LoginForm redirectTo={redirectTo ?? "/courses"} role={role} showForgot={forgot === "1"} />;
|
||||
return (
|
||||
<LoginForm
|
||||
redirectTo={redirectTo ?? "/courses"}
|
||||
role={role}
|
||||
showForgot={forgot === "1"}
|
||||
skipAuthedRedirect={switchUser === "1"}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,130 +0,0 @@
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import StudentClassroomClient from "@/components/courses/StudentClassroomClient";
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{ slug: string }>;
|
||||
searchParams: Promise<{ lesson?: string }>;
|
||||
};
|
||||
|
||||
export default async function CourseLearnPage({ params, searchParams }: PageProps) {
|
||||
const { slug } = await params;
|
||||
const { lesson: requestedLessonId } = await searchParams;
|
||||
|
||||
const user = await requireUser();
|
||||
if (!user?.id) {
|
||||
redirect(`/courses/${slug}`);
|
||||
}
|
||||
|
||||
const course = await db.course.findUnique({
|
||||
where: { slug },
|
||||
select: {
|
||||
id: true,
|
||||
slug: true,
|
||||
title: true,
|
||||
price: true,
|
||||
modules: {
|
||||
orderBy: { orderIndex: "asc" },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
lessons: {
|
||||
orderBy: { orderIndex: "asc" },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
description: true,
|
||||
videoUrl: true,
|
||||
estimatedDuration: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!course) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
let enrollment = await db.enrollment.findUnique({
|
||||
where: {
|
||||
userId_courseId: {
|
||||
userId: user.id,
|
||||
courseId: course.id,
|
||||
},
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
|
||||
if (!enrollment) {
|
||||
const isFree = Number(course.price) === 0;
|
||||
if (isFree) {
|
||||
enrollment = await db.enrollment.create({
|
||||
data: {
|
||||
userId: user.id,
|
||||
courseId: course.id,
|
||||
amountPaid: 0,
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
} else {
|
||||
redirect(`/courses/${slug}`);
|
||||
}
|
||||
}
|
||||
|
||||
const completedProgress = await db.userProgress.findMany({
|
||||
where: {
|
||||
userId: user.id,
|
||||
isCompleted: true,
|
||||
lesson: {
|
||||
module: {
|
||||
courseId: course.id,
|
||||
},
|
||||
},
|
||||
},
|
||||
select: {
|
||||
lessonId: true,
|
||||
},
|
||||
});
|
||||
|
||||
const modules = course.modules.map((module) => ({
|
||||
id: module.id,
|
||||
title: getText(module.title) || "Untitled module",
|
||||
lessons: module.lessons.map((lesson) => ({
|
||||
id: lesson.id,
|
||||
title: getText(lesson.title) || "Untitled lesson",
|
||||
description: getText(lesson.description),
|
||||
videoUrl: lesson.videoUrl,
|
||||
estimatedDuration: lesson.estimatedDuration,
|
||||
})),
|
||||
}));
|
||||
|
||||
const flattenedLessonIds = modules.flatMap((module) => module.lessons.map((lesson) => lesson.id));
|
||||
const initialSelectedLessonId =
|
||||
requestedLessonId && flattenedLessonIds.includes(requestedLessonId)
|
||||
? requestedLessonId
|
||||
: flattenedLessonIds[0] ?? "";
|
||||
|
||||
return (
|
||||
<StudentClassroomClient
|
||||
courseSlug={course.slug}
|
||||
courseTitle={getText(course.title) || "Untitled course"}
|
||||
modules={modules}
|
||||
initialSelectedLessonId={initialSelectedLessonId}
|
||||
initialCompletedLessonIds={completedProgress.map((progress) => progress.lessonId)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
229
app/(protected)/my-courses/page.tsx
Normal file
229
app/(protected)/my-courses/page.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { UserRole } from "@prisma/client";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import { db } from "@/lib/prisma";
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
export default async function MyCoursesPage() {
|
||||
const user = await requireUser();
|
||||
if (!user?.id) {
|
||||
redirect("/auth/login?redirectTo=/my-courses");
|
||||
}
|
||||
|
||||
const isTeacher = user.role === UserRole.TEACHER || user.role === UserRole.SUPER_ADMIN;
|
||||
|
||||
if (isTeacher) {
|
||||
const courses = await db.course.findMany({
|
||||
where: { authorId: user.id },
|
||||
include: {
|
||||
modules: {
|
||||
include: {
|
||||
lessons: {
|
||||
select: {
|
||||
id: true,
|
||||
videoUrl: true,
|
||||
youtubeUrl: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
_count: {
|
||||
select: {
|
||||
enrollments: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: { updatedAt: "desc" },
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel acve-section-base">
|
||||
<p className="acve-pill mb-3 w-fit">My Courses</p>
|
||||
<h1 className="text-3xl font-semibold leading-tight text-[#222a38] md:text-4xl">Your created courses</h1>
|
||||
<p className="mt-2 max-w-3xl text-base leading-relaxed text-slate-600">
|
||||
Review, edit, and publish the courses you are building for your students.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{courses.length === 0 ? (
|
||||
<section className="acve-panel p-6">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">No courses created yet</h2>
|
||||
<p className="mt-2 text-slate-600">Create your first teacher course to get started.</p>
|
||||
<Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/teacher/courses/new">
|
||||
Create course
|
||||
</Link>
|
||||
</section>
|
||||
) : (
|
||||
<section className="grid gap-4 md:grid-cols-2">
|
||||
{courses.map((course) => {
|
||||
const totalLessons = course.modules.reduce((acc, module) => acc + module.lessons.length, 0);
|
||||
const lessonsWithVideo = course.modules.reduce(
|
||||
(acc, module) => acc + module.lessons.filter((lesson) => lesson.videoUrl || lesson.youtubeUrl).length,
|
||||
0,
|
||||
);
|
||||
const title = getText(course.title) || "Untitled course";
|
||||
|
||||
return (
|
||||
<article key={course.id} className="acve-panel p-5">
|
||||
<h2 className="text-2xl font-semibold text-[#222a38]">{title}</h2>
|
||||
<p className="mt-2 text-sm text-slate-600">
|
||||
{course._count.enrollments} students | {course.modules.length} modules | {totalLessons} lessons
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-slate-600">
|
||||
Upload coverage: {lessonsWithVideo}/{totalLessons || 0} lessons with video
|
||||
</p>
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
<Link
|
||||
className="acve-button-primary inline-flex px-4 py-2 text-sm font-semibold"
|
||||
href={`/teacher/courses/${course.slug}/edit`}
|
||||
>
|
||||
Edit course
|
||||
</Link>
|
||||
<Link
|
||||
className="rounded-md border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50"
|
||||
href={`/courses/${course.slug}`}
|
||||
target="_blank"
|
||||
>
|
||||
Preview
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const enrollments = await db.enrollment.findMany({
|
||||
where: { userId: user.id },
|
||||
include: {
|
||||
course: {
|
||||
include: {
|
||||
modules: {
|
||||
include: {
|
||||
lessons: {
|
||||
select: { id: true },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: { purchasedAt: "desc" },
|
||||
});
|
||||
|
||||
const courseIds = enrollments.map((enrollment) => enrollment.courseId);
|
||||
const completed = await db.userProgress.findMany({
|
||||
where: {
|
||||
userId: user.id,
|
||||
isCompleted: true,
|
||||
lesson: {
|
||||
module: {
|
||||
courseId: {
|
||||
in: courseIds,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
select: {
|
||||
lesson: {
|
||||
select: {
|
||||
module: {
|
||||
select: { courseId: true },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const certificates = await db.certificate.findMany({
|
||||
where: {
|
||||
userId: user.id,
|
||||
courseId: {
|
||||
in: courseIds,
|
||||
},
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
courseId: true,
|
||||
},
|
||||
});
|
||||
|
||||
const completedByCourse = new Map<string, number>();
|
||||
for (const item of completed) {
|
||||
const courseId = item.lesson.module.courseId;
|
||||
completedByCourse.set(courseId, (completedByCourse.get(courseId) ?? 0) + 1);
|
||||
}
|
||||
const certificateByCourse = new Map(certificates.map((certificate) => [certificate.courseId, certificate.id]));
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel acve-section-base">
|
||||
<p className="acve-pill mb-3 w-fit">My Courses</p>
|
||||
<h1 className="text-3xl font-semibold leading-tight text-[#222a38] md:text-4xl">Your enrolled courses</h1>
|
||||
<p className="mt-2 max-w-3xl text-base leading-relaxed text-slate-600">
|
||||
Continue where you left off, check completion, and download certificates for finished courses.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{enrollments.length === 0 ? (
|
||||
<section className="acve-panel p-6">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">No courses enrolled yet</h2>
|
||||
<p className="mt-2 text-slate-600">Browse the catalog and start your first learning path.</p>
|
||||
<Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/courses">
|
||||
Browse courses
|
||||
</Link>
|
||||
</section>
|
||||
) : (
|
||||
<section className="grid gap-4 md:grid-cols-2">
|
||||
{enrollments.map((enrollment) => {
|
||||
const totalLessons = enrollment.course.modules.reduce((acc, module) => acc + module.lessons.length, 0);
|
||||
const completedLessons = completedByCourse.get(enrollment.course.id) ?? 0;
|
||||
const progressPercent = totalLessons > 0 ? Math.round((completedLessons / totalLessons) * 100) : 0;
|
||||
const courseTitle = getText(enrollment.course.title) || "Untitled course";
|
||||
const certificateId = certificateByCourse.get(enrollment.course.id);
|
||||
|
||||
return (
|
||||
<article key={enrollment.id} className="acve-panel p-5">
|
||||
<h2 className="text-2xl font-semibold text-[#222a38]">{courseTitle}</h2>
|
||||
<p className="mt-2 text-sm text-slate-600">
|
||||
Progress: {completedLessons}/{totalLessons} lessons ({progressPercent}%)
|
||||
</p>
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
<Link
|
||||
className="acve-button-primary inline-flex px-4 py-2 text-sm font-semibold"
|
||||
href={`/courses/${enrollment.course.slug}/learn`}
|
||||
>
|
||||
{progressPercent >= 100 ? "Review" : "Continue"}
|
||||
</Link>
|
||||
{certificateId ? (
|
||||
<Link
|
||||
className="rounded-md border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50"
|
||||
href={`/api/certificates/${certificateId}/pdf`}
|
||||
>
|
||||
Download Certificate
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
113
app/(protected)/practice/[slug]/actions.ts
Normal file
113
app/(protected)/practice/[slug]/actions.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
"use server";
|
||||
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import { mockPracticeModules } from "@/lib/data/mockPractice";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { refreshStudyRecommendations } from "@/lib/recommendations";
|
||||
|
||||
type SubmitAttemptInput = {
|
||||
slug: string;
|
||||
selectedAnswers: number[];
|
||||
};
|
||||
|
||||
type PracticePrismaClient = {
|
||||
miniGame: {
|
||||
upsert: (args: object) => Promise<{ id: string }>;
|
||||
};
|
||||
miniGameAttempt: {
|
||||
create: (args: object) => Promise<unknown>;
|
||||
findMany: (args: object) => Promise<
|
||||
{ id: string; scorePercent: number; correctCount: number; totalQuestions: number; completedAt: Date }[]
|
||||
>;
|
||||
};
|
||||
};
|
||||
|
||||
function toDifficulty(level?: string): "BEGINNER" | "INTERMEDIATE" | "ADVANCED" {
|
||||
if (level === "Beginner") return "BEGINNER";
|
||||
if (level === "Advanced") return "ADVANCED";
|
||||
return "INTERMEDIATE";
|
||||
}
|
||||
|
||||
export async function submitPracticeAttempt({ slug, selectedAnswers }: SubmitAttemptInput) {
|
||||
const user = await requireUser();
|
||||
if (!user?.id) return { success: false as const, error: "Unauthorized" };
|
||||
|
||||
const practiceModule = mockPracticeModules.find((item) => item.slug === slug && item.isInteractive && item.questions?.length);
|
||||
if (!practiceModule || !practiceModule.questions) return { success: false as const, error: "Practice module not found" };
|
||||
|
||||
const correctCount = practiceModule.questions.reduce((acc, question, index) => {
|
||||
return acc + (selectedAnswers[index] === question.answerIndex ? 1 : 0);
|
||||
}, 0);
|
||||
const total = practiceModule.questions.length;
|
||||
const scorePercent = Math.round((correctCount / total) * 100);
|
||||
const prismaMini = db as unknown as PracticePrismaClient;
|
||||
|
||||
try {
|
||||
const miniGame = await prismaMini.miniGame.upsert({
|
||||
where: { slug: practiceModule.slug },
|
||||
update: {
|
||||
title: practiceModule.title,
|
||||
description: practiceModule.description,
|
||||
isActive: true,
|
||||
difficulty: toDifficulty(practiceModule.difficulty),
|
||||
},
|
||||
create: {
|
||||
slug: practiceModule.slug,
|
||||
title: practiceModule.title,
|
||||
description: practiceModule.description,
|
||||
isActive: true,
|
||||
difficulty: toDifficulty(practiceModule.difficulty),
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
|
||||
await prismaMini.miniGameAttempt.create({
|
||||
data: {
|
||||
userId: user.id,
|
||||
miniGameId: miniGame.id,
|
||||
scorePercent,
|
||||
correctCount,
|
||||
totalQuestions: total,
|
||||
},
|
||||
});
|
||||
|
||||
await refreshStudyRecommendations(user.id);
|
||||
} catch {
|
||||
return { success: false as const, error: "Mini-game tables are not migrated yet" };
|
||||
}
|
||||
revalidatePath("/profile");
|
||||
|
||||
return { success: true as const, scorePercent, correctCount, total };
|
||||
}
|
||||
|
||||
export async function getPracticeAttempts(slug: string) {
|
||||
const user = await requireUser();
|
||||
if (!user?.id) return [];
|
||||
|
||||
try {
|
||||
const attempts = await (db as unknown as PracticePrismaClient).miniGameAttempt.findMany({
|
||||
where: {
|
||||
userId: user.id,
|
||||
miniGame: {
|
||||
slug,
|
||||
},
|
||||
},
|
||||
orderBy: {
|
||||
completedAt: "desc",
|
||||
},
|
||||
take: 5,
|
||||
select: {
|
||||
id: true,
|
||||
scorePercent: true,
|
||||
correctCount: true,
|
||||
totalQuestions: true,
|
||||
completedAt: true,
|
||||
},
|
||||
});
|
||||
|
||||
return attempts;
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
90
app/(protected)/practice/[slug]/page.tsx
Executable file → Normal file
90
app/(protected)/practice/[slug]/page.tsx
Executable file → Normal file
@@ -1,17 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useState, useTransition } from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import ProgressBar from "@/components/ProgressBar";
|
||||
import { getPracticeBySlug, mockPracticeModules } from "@/lib/data/mockPractice";
|
||||
|
||||
const attemptsKey = (slug: string) => `acve.practice-attempts.${slug}`;
|
||||
import { getPracticeAttempts, submitPracticeAttempt } from "@/app/(protected)/practice/[slug]/actions";
|
||||
|
||||
type AttemptRecord = {
|
||||
completedAt: string;
|
||||
score: number;
|
||||
total: number;
|
||||
id: string;
|
||||
scorePercent: number;
|
||||
correctCount: number;
|
||||
totalQuestions: number;
|
||||
completedAt: Date;
|
||||
};
|
||||
|
||||
export default function PracticeExercisePage() {
|
||||
@@ -23,21 +24,16 @@ export default function PracticeExercisePage() {
|
||||
const [score, setScore] = useState(0);
|
||||
const [finished, setFinished] = useState(false);
|
||||
const [selected, setSelected] = useState<number | null>(null);
|
||||
const [selectedAnswers, setSelectedAnswers] = useState<number[]>([]);
|
||||
const [attempts, setAttempts] = useState<AttemptRecord[]>([]);
|
||||
const [isSaving, startTransition] = useTransition();
|
||||
|
||||
const loadAttempts = () => {
|
||||
if (!practiceModule) return;
|
||||
if (typeof window === "undefined") return;
|
||||
const raw = window.localStorage.getItem(attemptsKey(practiceModule.slug));
|
||||
if (!raw) {
|
||||
setAttempts([]);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setAttempts(JSON.parse(raw) as AttemptRecord[]);
|
||||
} catch {
|
||||
setAttempts([]);
|
||||
}
|
||||
startTransition(async () => {
|
||||
const result = await getPracticeAttempts(practiceModule.slug);
|
||||
setAttempts(result as AttemptRecord[]);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -79,21 +75,23 @@ export default function PracticeExercisePage() {
|
||||
};
|
||||
|
||||
const next = () => {
|
||||
if (selected === null) return;
|
||||
setSelectedAnswers((prev) => {
|
||||
const nextAnswers = [...prev];
|
||||
nextAnswers[index] = selected;
|
||||
return nextAnswers;
|
||||
});
|
||||
|
||||
if (index + 1 >= total) {
|
||||
if (typeof window !== "undefined") {
|
||||
const raw = window.localStorage.getItem(attemptsKey(practiceModule.slug));
|
||||
const parsed = raw ? ((JSON.parse(raw) as AttemptRecord[]) ?? []) : [];
|
||||
const nextAttempts = [
|
||||
{
|
||||
completedAt: new Date().toISOString(),
|
||||
score,
|
||||
total,
|
||||
},
|
||||
...parsed,
|
||||
].slice(0, 5);
|
||||
window.localStorage.setItem(attemptsKey(practiceModule.slug), JSON.stringify(nextAttempts));
|
||||
setAttempts(nextAttempts);
|
||||
}
|
||||
const finalAnswers = [...selectedAnswers];
|
||||
finalAnswers[index] = selected;
|
||||
startTransition(async () => {
|
||||
await submitPracticeAttempt({
|
||||
slug: practiceModule.slug,
|
||||
selectedAnswers: finalAnswers,
|
||||
});
|
||||
loadAttempts();
|
||||
});
|
||||
setFinished(true);
|
||||
return;
|
||||
}
|
||||
@@ -106,6 +104,7 @@ export default function PracticeExercisePage() {
|
||||
setIndex(0);
|
||||
setScore(0);
|
||||
setSelected(null);
|
||||
setSelectedAnswers([]);
|
||||
setFinished(false);
|
||||
};
|
||||
|
||||
@@ -115,6 +114,7 @@ export default function PracticeExercisePage() {
|
||||
setIndex(0);
|
||||
setScore(0);
|
||||
setSelected(null);
|
||||
setSelectedAnswers([]);
|
||||
};
|
||||
|
||||
if (finished) {
|
||||
@@ -130,9 +130,6 @@ export default function PracticeExercisePage() {
|
||||
<button className="acve-button-primary px-5 py-2 text-sm font-semibold hover:brightness-105" onClick={restart} type="button">
|
||||
Retake quiz
|
||||
</button>
|
||||
<button className="rounded-md border border-slate-300 px-5 py-2 text-sm font-semibold text-slate-700" type="button">
|
||||
Review answers (placeholder)
|
||||
</button>
|
||||
<Link className="rounded-md border border-slate-300 px-5 py-2 text-sm font-semibold text-slate-700" href="/practice">
|
||||
Back to modules
|
||||
</Link>
|
||||
@@ -140,14 +137,15 @@ export default function PracticeExercisePage() {
|
||||
</section>
|
||||
|
||||
<section className="acve-panel p-4">
|
||||
<h2 className="text-base font-semibold text-slate-800">Attempt History (Mock)</h2>
|
||||
<h2 className="text-base font-semibold text-slate-800">Attempt History</h2>
|
||||
{attempts.length === 0 ? (
|
||||
<p className="mt-2 text-sm text-slate-600">No attempts recorded yet.</p>
|
||||
) : (
|
||||
<ul className="mt-2 space-y-2">
|
||||
{attempts.map((attempt) => (
|
||||
<li key={attempt.completedAt} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
||||
Score {attempt.score}/{attempt.total} on {new Date(attempt.completedAt).toLocaleString()}
|
||||
<li key={attempt.id} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
||||
Score {attempt.correctCount}/{attempt.totalQuestions} ({attempt.scorePercent}%) on{" "}
|
||||
{new Date(attempt.completedAt).toLocaleString()}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -175,7 +173,7 @@ export default function PracticeExercisePage() {
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Difficulty</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">Intermediate</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">{practiceModule.difficulty ?? "Intermediate"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 flex flex-wrap items-center gap-2">
|
||||
@@ -189,14 +187,15 @@ export default function PracticeExercisePage() {
|
||||
</section>
|
||||
|
||||
<section className="acve-panel p-4">
|
||||
<h2 className="text-base font-semibold text-slate-800">Attempt History (Mock)</h2>
|
||||
<h2 className="text-base font-semibold text-slate-800">Attempt History</h2>
|
||||
{attempts.length === 0 ? (
|
||||
<p className="mt-2 text-sm text-slate-600">No attempts recorded yet for this module.</p>
|
||||
) : (
|
||||
<ul className="mt-2 space-y-2">
|
||||
{attempts.map((attempt) => (
|
||||
<li key={attempt.completedAt} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
||||
Score {attempt.score}/{attempt.total} on {new Date(attempt.completedAt).toLocaleString()}
|
||||
<li key={attempt.id} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
||||
Score {attempt.correctCount}/{attempt.totalQuestions} ({attempt.scorePercent}%) on{" "}
|
||||
{new Date(attempt.completedAt).toLocaleString()}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -237,14 +236,15 @@ export default function PracticeExercisePage() {
|
||||
</section>
|
||||
|
||||
<section className="acve-panel p-4">
|
||||
<h2 className="text-lg font-semibold text-slate-800">Attempt History (Mock)</h2>
|
||||
<h2 className="text-lg font-semibold text-slate-800">Attempt History</h2>
|
||||
{attempts.length === 0 ? (
|
||||
<p className="mt-2 text-sm text-slate-600">No attempts recorded yet.</p>
|
||||
) : (
|
||||
<ul className="mt-2 space-y-2">
|
||||
{attempts.map((attempt) => (
|
||||
<li key={attempt.completedAt} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
||||
Score {attempt.score}/{attempt.total} on {new Date(attempt.completedAt).toLocaleString()}
|
||||
<li key={attempt.id} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
||||
Score {attempt.correctCount}/{attempt.totalQuestions} ({attempt.scorePercent}%) on{" "}
|
||||
{new Date(attempt.completedAt).toLocaleString()}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -285,7 +285,7 @@ export default function PracticeExercisePage() {
|
||||
|
||||
<button
|
||||
className="acve-button-primary mt-6 px-6 py-2 text-sm font-semibold hover:brightness-105 disabled:opacity-50"
|
||||
disabled={selected === null}
|
||||
disabled={selected === null || isSaving}
|
||||
onClick={next}
|
||||
type="button"
|
||||
>
|
||||
|
||||
375
app/(protected)/profile/page.tsx
Normal file
375
app/(protected)/profile/page.tsx
Normal file
@@ -0,0 +1,375 @@
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { UserRole } from "@prisma/client";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { getActiveRecommendations, getMiniGameGrade } from "@/lib/recommendations";
|
||||
|
||||
type ProfilePrismaClient = {
|
||||
miniGameAttempt: {
|
||||
findMany: (args: object) => Promise<
|
||||
{
|
||||
miniGameId: string;
|
||||
scorePercent: number;
|
||||
miniGame: { id: string; title: string; slug: string };
|
||||
}[]
|
||||
>;
|
||||
};
|
||||
};
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
const levelLabel: Record<string, string> = {
|
||||
BEGINNER: "Beginner",
|
||||
INTERMEDIATE: "Intermediate",
|
||||
ADVANCED: "Advanced",
|
||||
EXPERT: "Expert",
|
||||
};
|
||||
|
||||
export default async function ProfilePage() {
|
||||
const user = await requireUser();
|
||||
if (!user?.id) {
|
||||
redirect("/auth/login?redirectTo=/profile");
|
||||
}
|
||||
|
||||
const isTeacher = user.role === UserRole.TEACHER || user.role === UserRole.SUPER_ADMIN;
|
||||
|
||||
if (isTeacher) {
|
||||
const authoredCourses = await db.course
|
||||
.findMany({
|
||||
where: { authorId: user.id },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
slug: true,
|
||||
tags: true,
|
||||
level: true,
|
||||
status: true,
|
||||
learningOutcomes: true,
|
||||
updatedAt: true,
|
||||
_count: {
|
||||
select: {
|
||||
modules: true,
|
||||
enrollments: true,
|
||||
},
|
||||
},
|
||||
modules: {
|
||||
select: {
|
||||
lessons: {
|
||||
select: {
|
||||
id: true,
|
||||
videoUrl: true,
|
||||
youtubeUrl: true,
|
||||
isFreePreview: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: { updatedAt: "desc" },
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to load authored courses for profile.", error);
|
||||
return [];
|
||||
});
|
||||
|
||||
const totalCourses = authoredCourses.length;
|
||||
const publishedCourses = authoredCourses.filter((course) => course.status === "PUBLISHED").length;
|
||||
const totalModules = authoredCourses.reduce((acc, course) => acc + course._count.modules, 0);
|
||||
const totalStudents = authoredCourses.reduce((acc, course) => acc + course._count.enrollments, 0);
|
||||
|
||||
const lessons = authoredCourses.flatMap((course) => course.modules.flatMap((module) => module.lessons));
|
||||
const totalLessons = lessons.length;
|
||||
const uploadedLessons = lessons.filter((lesson) => lesson.videoUrl || lesson.youtubeUrl).length;
|
||||
const previewLessons = lessons.filter((lesson) => lesson.isFreePreview).length;
|
||||
|
||||
const topicSet = new Set<string>();
|
||||
const outcomeSet = new Set<string>();
|
||||
for (const course of authoredCourses) {
|
||||
for (const tag of course.tags) {
|
||||
if (tag.trim()) topicSet.add(tag.trim());
|
||||
}
|
||||
if (Array.isArray(course.learningOutcomes)) {
|
||||
for (const outcome of course.learningOutcomes) {
|
||||
if (typeof outcome === "string" && outcome.trim()) {
|
||||
outcomeSet.add(outcome.trim());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const masteredTopics = topicSet.size > 0 ? [...topicSet] : [...new Set(authoredCourses.map((course) => levelLabel[course.level] ?? course.level))];
|
||||
const strengths = [...outcomeSet].slice(0, 8);
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel acve-section-base">
|
||||
<p className="acve-pill mb-3 w-fit">Profile</p>
|
||||
<h1 className="text-3xl font-semibold leading-tight text-[#222a38] md:text-4xl">{user.fullName || user.email}</h1>
|
||||
<p className="mt-2 text-base text-slate-600">Teacher account | {user.email}</p>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 md:grid-cols-4">
|
||||
<article className="acve-panel p-5">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Courses created</p>
|
||||
<p className="mt-2 text-4xl font-semibold text-slate-900">{totalCourses}</p>
|
||||
</article>
|
||||
<article className="acve-panel p-5">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Published</p>
|
||||
<p className="mt-2 text-4xl font-semibold text-slate-900">{publishedCourses}</p>
|
||||
</article>
|
||||
<article className="acve-panel p-5">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Students</p>
|
||||
<p className="mt-2 text-4xl font-semibold text-slate-900">{totalStudents}</p>
|
||||
</article>
|
||||
<article className="acve-panel p-5">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Content units</p>
|
||||
<p className="mt-2 text-4xl font-semibold text-slate-900">{totalModules + totalLessons}</p>
|
||||
<p className="mt-2 text-sm text-slate-600">{totalModules} modules + {totalLessons} lessons</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 lg:grid-cols-2">
|
||||
<article className="acve-panel p-5">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">Topics mastered</h2>
|
||||
{masteredTopics.length === 0 ? (
|
||||
<p className="mt-3 text-sm text-slate-600">No topic metadata yet. Add tags to your courses.</p>
|
||||
) : (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{masteredTopics.map((topic) => (
|
||||
<span key={topic} className="rounded-full border border-slate-300 px-3 py-1 text-xs font-semibold text-slate-700">
|
||||
{topic}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{strengths.length > 0 ? (
|
||||
<ul className="mt-4 space-y-2 text-sm text-slate-700">
|
||||
{strengths.map((item) => (
|
||||
<li key={item} className="rounded-lg border border-slate-200 px-3 py-2">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</article>
|
||||
|
||||
<article className="acve-panel p-5">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">Upload information</h2>
|
||||
<ul className="mt-3 space-y-2 text-sm text-slate-700">
|
||||
<li className="rounded-lg border border-slate-200 px-3 py-2">
|
||||
Lessons with media: {uploadedLessons}/{totalLessons || 0}
|
||||
</li>
|
||||
<li className="rounded-lg border border-slate-200 px-3 py-2">Preview lessons enabled: {previewLessons}</li>
|
||||
<li className="rounded-lg border border-slate-200 px-3 py-2">Lessons pending upload: {Math.max(totalLessons - uploadedLessons, 0)}</li>
|
||||
</ul>
|
||||
<Link className="mt-4 inline-flex text-sm font-semibold text-brand hover:underline" href="/teacher/uploads">
|
||||
Open upload library
|
||||
</Link>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section className="acve-panel p-5">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">Recent course activity</h2>
|
||||
{authoredCourses.length === 0 ? (
|
||||
<p className="mt-3 text-sm text-slate-600">No courses yet. Start by creating a new course.</p>
|
||||
) : (
|
||||
<ul className="mt-3 space-y-2">
|
||||
{authoredCourses.slice(0, 6).map((course) => (
|
||||
<li key={course.id} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
||||
<p className="font-semibold text-slate-900">{getText(course.title) || "Untitled course"}</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
{course.status} | {course._count.modules} modules | {course._count.enrollments} students | updated{" "}
|
||||
{new Date(course.updatedAt).toLocaleDateString()}
|
||||
</p>
|
||||
<Link className="mt-1 inline-flex text-xs font-semibold text-brand hover:underline" href={`/teacher/courses/${course.slug}/edit`}>
|
||||
Open editor
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const [grade, recommendations, certificates] = await Promise.all([
|
||||
getMiniGameGrade(user.id).catch((error) => {
|
||||
console.error("Failed to load mini-game grade.", error);
|
||||
return 0;
|
||||
}),
|
||||
getActiveRecommendations(user.id).catch((error) => {
|
||||
console.error("Failed to load recommendations.", error);
|
||||
return [];
|
||||
}),
|
||||
db.certificate
|
||||
.findMany({
|
||||
where: { userId: user.id },
|
||||
select: {
|
||||
id: true,
|
||||
issuedAt: true,
|
||||
metadataSnapshot: true,
|
||||
course: {
|
||||
select: {
|
||||
title: true,
|
||||
slug: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: { issuedAt: "desc" },
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to load certificates for profile.", error);
|
||||
return [];
|
||||
}),
|
||||
]);
|
||||
|
||||
let attempts: {
|
||||
miniGameId: string;
|
||||
scorePercent: number;
|
||||
miniGame: { id: string; title: string; slug: string };
|
||||
}[] = [];
|
||||
try {
|
||||
attempts = await (db as unknown as ProfilePrismaClient).miniGameAttempt.findMany({
|
||||
where: { userId: user.id },
|
||||
include: {
|
||||
miniGame: {
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
slug: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: { completedAt: "desc" },
|
||||
});
|
||||
} catch {
|
||||
attempts = [];
|
||||
}
|
||||
|
||||
const latestByGame = new Map<string, number>();
|
||||
const bestByGame = new Map<string, number>();
|
||||
const titleByGame = new Map<string, string>();
|
||||
for (const attempt of attempts) {
|
||||
if (!latestByGame.has(attempt.miniGameId)) {
|
||||
latestByGame.set(attempt.miniGameId, attempt.scorePercent);
|
||||
}
|
||||
const best = bestByGame.get(attempt.miniGameId) ?? 0;
|
||||
if (attempt.scorePercent > best) {
|
||||
bestByGame.set(attempt.miniGameId, attempt.scorePercent);
|
||||
}
|
||||
titleByGame.set(attempt.miniGameId, attempt.miniGame.title);
|
||||
}
|
||||
|
||||
const gameRows = [...titleByGame.keys()].map((gameId) => ({
|
||||
gameId,
|
||||
title: titleByGame.get(gameId) ?? "Mini-game",
|
||||
latest: latestByGame.get(gameId) ?? 0,
|
||||
best: bestByGame.get(gameId) ?? 0,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel acve-section-base">
|
||||
<p className="acve-pill mb-3 w-fit">Profile</p>
|
||||
<h1 className="text-3xl font-semibold leading-tight text-[#222a38] md:text-4xl">{user.fullName || user.email}</h1>
|
||||
<p className="mt-2 text-base text-slate-600">{user.email}</p>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 md:grid-cols-3">
|
||||
<article className="acve-panel p-5">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Mini-game grade</p>
|
||||
<p className="mt-2 text-4xl font-semibold text-slate-900">{grade}%</p>
|
||||
<p className="mt-2 text-sm text-slate-600">Average of latest attempts across mini-games.</p>
|
||||
</article>
|
||||
<article className="acve-panel p-5">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Attempts</p>
|
||||
<p className="mt-2 text-4xl font-semibold text-slate-900">{attempts.length}</p>
|
||||
<Link className="mt-2 inline-flex text-sm font-semibold text-brand hover:underline" href="/practice">
|
||||
Play mini-games
|
||||
</Link>
|
||||
</article>
|
||||
<article className="acve-panel p-5">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Certificates</p>
|
||||
<p className="mt-2 text-4xl font-semibold text-slate-900">{certificates.length}</p>
|
||||
<Link className="mt-2 inline-flex text-sm font-semibold text-brand hover:underline" href="/my-courses">
|
||||
View my courses
|
||||
</Link>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 lg:grid-cols-2">
|
||||
<article className="acve-panel p-5">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">Mini-game breakdown</h2>
|
||||
{gameRows.length === 0 ? (
|
||||
<p className="mt-3 text-sm text-slate-600">No attempts yet. Complete a mini-game to generate your grade.</p>
|
||||
) : (
|
||||
<ul className="mt-3 space-y-2">
|
||||
{gameRows.map((row) => (
|
||||
<li key={row.gameId} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
||||
<span className="font-semibold text-slate-900">{row.title}</span> | latest: {row.latest}% | best: {row.best}%
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</article>
|
||||
|
||||
<article className="acve-panel p-5">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">Recommended next</h2>
|
||||
{recommendations.length === 0 ? (
|
||||
<p className="mt-3 text-sm text-slate-600">No recommendations yet. Complete a mini-game or enroll in a course first.</p>
|
||||
) : (
|
||||
<ul className="mt-3 space-y-2">
|
||||
{recommendations.map((recommendation) => (
|
||||
<li key={recommendation.courseId} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
||||
<p className="font-semibold text-slate-900">{recommendation.title}</p>
|
||||
<p className="text-xs text-slate-500">{recommendation.reason}</p>
|
||||
<Link className="mt-1 inline-flex text-xs font-semibold text-brand hover:underline" href={`/courses/${recommendation.slug}`}>
|
||||
Open course
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section className="acve-panel p-5">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">Certificates</h2>
|
||||
{certificates.length === 0 ? (
|
||||
<p className="mt-3 text-sm text-slate-600">No certificates issued yet.</p>
|
||||
) : (
|
||||
<ul className="mt-3 space-y-2">
|
||||
{certificates.map((certificate) => {
|
||||
const certificateNumber =
|
||||
(certificate as Record<string, unknown>).certificateNumber ??
|
||||
(certificate.metadataSnapshot as Record<string, unknown> | null)?.certificateNumber ??
|
||||
"N/A";
|
||||
return (
|
||||
<li key={certificate.id} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
||||
<p className="font-semibold text-slate-900">{getText(certificate.course.title) || "Course"}</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
Certificate #{String(certificateNumber)} | issued {new Date(certificate.issuedAt).toLocaleDateString()}
|
||||
</p>
|
||||
<Link className="mt-1 inline-flex text-xs font-semibold text-brand hover:underline" href={`/api/certificates/${certificate.id}/pdf`}>
|
||||
Download PDF
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,6 +5,11 @@ import { requireTeacher } from "@/lib/auth/requireTeacher";
|
||||
import { z } from "zod";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { ContentStatus, Prisma, ProficiencyLevel } from "@prisma/client";
|
||||
import {
|
||||
buildLessonDescriptionMeta,
|
||||
parseLessonDescriptionMeta,
|
||||
type LessonContentType,
|
||||
} from "@/lib/courses/lessonContent";
|
||||
|
||||
// --- VALIDATION SCHEMAS (Zod) ---
|
||||
|
||||
@@ -129,6 +134,17 @@ export async function deleteCourse(courseId: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function parseLearningOutcomes(raw: FormDataEntryValue | null): string[] {
|
||||
if (raw == null || typeof raw !== "string") return [];
|
||||
try {
|
||||
const parsed = JSON.parse(raw) as unknown;
|
||||
if (!Array.isArray(parsed)) return [];
|
||||
return parsed.filter((x): x is string => typeof x === "string");
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateCourse(courseId: string, courseSlug: string, formData: FormData) {
|
||||
const user = await requireTeacher();
|
||||
if (!user) return { success: false, error: "Unauthorized" };
|
||||
@@ -140,6 +156,7 @@ export async function updateCourse(courseId: string, courseSlug: string, formDat
|
||||
const level = formData.get("level") as ProficiencyLevel;
|
||||
const status = formData.get("status") as ContentStatus;
|
||||
const price = parseFloat(formData.get("price") as string) || 0;
|
||||
const learningOutcomes = parseLearningOutcomes(formData.get("learningOutcomes"));
|
||||
|
||||
await db.course.update({
|
||||
where: { id: courseId, authorId: user.id },
|
||||
@@ -149,12 +166,16 @@ export async function updateCourse(courseId: string, courseSlug: string, formDat
|
||||
level,
|
||||
status,
|
||||
price,
|
||||
},
|
||||
learningOutcomes:
|
||||
learningOutcomes.length > 0 ? (learningOutcomes as Prisma.InputJsonValue) : Prisma.JsonNull,
|
||||
} as Prisma.CourseUpdateInput,
|
||||
});
|
||||
|
||||
// Revalidate both the list and the editor (edit route uses slug, not id)
|
||||
// Revalidate teacher list, editor page + layout (so router.refresh() gets fresh data), and public catalog
|
||||
revalidatePath("/teacher/courses");
|
||||
revalidatePath(`/teacher/courses/${courseSlug}/edit`, "page");
|
||||
revalidatePath(`/teacher/courses/${courseSlug}/edit`, "layout");
|
||||
revalidatePath("/courses");
|
||||
return { success: true };
|
||||
} catch {
|
||||
return { success: false, error: "Failed to update" };
|
||||
@@ -163,8 +184,13 @@ export async function updateCourse(courseId: string, courseSlug: string, formDat
|
||||
|
||||
export async function updateLesson(lessonId: string, data: {
|
||||
title?: string;
|
||||
description?: Prisma.InputJsonValue | null;
|
||||
description?: string;
|
||||
videoUrl?: string;
|
||||
youtubeUrl?: string;
|
||||
materialUrl?: string;
|
||||
contentType?: LessonContentType;
|
||||
estimatedDurationMinutes?: number;
|
||||
isPreview?: boolean; // maps to DB field isFreePreview
|
||||
isPublished?: boolean; // optional: for later
|
||||
}) {
|
||||
const user = await requireTeacher();
|
||||
@@ -173,8 +199,30 @@ export async function updateLesson(lessonId: string, data: {
|
||||
try {
|
||||
const updateData: Prisma.LessonUpdateInput = { updatedAt: new Date() };
|
||||
if (data.title !== undefined) updateData.title = data.title;
|
||||
if (data.description !== undefined) updateData.description = data.description === null ? Prisma.JsonNull : data.description;
|
||||
if (data.videoUrl !== undefined) updateData.videoUrl = data.videoUrl;
|
||||
if (data.youtubeUrl !== undefined) updateData.youtubeUrl = data.youtubeUrl;
|
||||
if (data.estimatedDurationMinutes !== undefined) {
|
||||
const minutes = Math.max(0, Math.round(data.estimatedDurationMinutes));
|
||||
updateData.estimatedDuration = minutes * 60;
|
||||
}
|
||||
if (data.isPreview !== undefined) updateData.isFreePreview = data.isPreview;
|
||||
|
||||
const shouldUpdateMeta =
|
||||
data.description !== undefined || data.contentType !== undefined || data.materialUrl !== undefined;
|
||||
|
||||
if (shouldUpdateMeta) {
|
||||
const lesson = await db.lesson.findUnique({
|
||||
where: { id: lessonId },
|
||||
select: { description: true },
|
||||
});
|
||||
|
||||
const existingMeta = parseLessonDescriptionMeta(lesson?.description);
|
||||
updateData.description = buildLessonDescriptionMeta({
|
||||
text: data.description ?? existingMeta.text,
|
||||
contentType: data.contentType ?? existingMeta.contentType,
|
||||
materialUrl: data.materialUrl ?? existingMeta.materialUrl,
|
||||
});
|
||||
}
|
||||
|
||||
await db.lesson.update({
|
||||
where: { id: lessonId },
|
||||
@@ -211,7 +259,7 @@ export async function createModule(courseId: string) {
|
||||
},
|
||||
});
|
||||
|
||||
revalidatePath(`/teacher/courses/${courseId}/edit`, "page");
|
||||
revalidatePath("/teacher/courses");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error("Create Module Error:", error);
|
||||
@@ -219,6 +267,38 @@ export async function createModule(courseId: string) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* UPDATE MODULE TITLE
|
||||
*/
|
||||
export async function updateModuleTitle(moduleId: string, title: string) {
|
||||
const user = await requireTeacher();
|
||||
if (!user) return { success: false, error: "Unauthorized" };
|
||||
|
||||
const trimmed = title?.trim() || "";
|
||||
if (!trimmed) return { success: false, error: "El título no puede estar vacío" };
|
||||
|
||||
try {
|
||||
const moduleRow = await db.module.findFirst({
|
||||
where: { id: moduleId, course: { authorId: user.id } },
|
||||
select: { id: true, course: { select: { slug: true } } },
|
||||
});
|
||||
if (!moduleRow) return { success: false, error: "Módulo no encontrado" };
|
||||
|
||||
await db.module.update({
|
||||
where: { id: moduleId },
|
||||
data: { title: trimmed },
|
||||
});
|
||||
|
||||
revalidatePath("/teacher/courses");
|
||||
revalidatePath(`/teacher/courses/${moduleRow.course.slug}/edit`, "page");
|
||||
revalidatePath(`/teacher/courses/${moduleRow.course.slug}/edit`, "layout");
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error("Update Module Title Error:", error);
|
||||
return { success: false, error: "No se pudo actualizar el título" };
|
||||
}
|
||||
}
|
||||
|
||||
// 2. CREATE LESSON
|
||||
export async function createLesson(moduleId: string) {
|
||||
const user = await requireTeacher();
|
||||
@@ -238,6 +318,9 @@ export async function createLesson(moduleId: string) {
|
||||
data: {
|
||||
moduleId,
|
||||
title: "Nueva Lección",
|
||||
description: {
|
||||
contentType: "VIDEO",
|
||||
},
|
||||
orderIndex: newOrder,
|
||||
estimatedDuration: 0,
|
||||
version: 1,
|
||||
@@ -383,4 +466,4 @@ export async function reorderLessons(lessonId: string, direction: "up" | "down")
|
||||
|
||||
revalidatePath(`/teacher/courses/${currentLesson.module.course.slug}/edit`, "page");
|
||||
return { success: true };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,9 @@ import { requireTeacher } from "@/lib/auth/requireTeacher";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import TeacherEditCourseForm from "@/components/teacher/TeacherEditCourseForm";
|
||||
|
||||
// Always fetch fresh course data (no Full Route Cache) so save + router.refresh() shows updated level/status
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function CourseEditPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const user = await requireTeacher();
|
||||
if (!user) redirect("/auth/login");
|
||||
@@ -37,5 +40,6 @@ export default async function CourseEditPage({ params }: { params: Promise<{ slu
|
||||
price: course.price.toNumber(),
|
||||
};
|
||||
|
||||
return <TeacherEditCourseForm course={courseData} />;
|
||||
// Key forces remount when course updates so uncontrolled inputs (level, status) show new defaultValues after save + router.refresh()
|
||||
return <TeacherEditCourseForm key={`${course.id}-${course.updatedAt.toISOString()}`} course={courseData} />;
|
||||
}
|
||||
@@ -5,6 +5,8 @@ import { useRouter } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import { updateLesson } from "@/app/(protected)/teacher/actions";
|
||||
import VideoUpload from "@/components/teacher/VideoUpload"; // The component you created earlier
|
||||
import { getClientLocale } from "@/lib/i18n/clientLocale";
|
||||
import { getLessonContentTypeLabel, lessonContentTypes, type LessonContentType } from "@/lib/courses/lessonContent";
|
||||
|
||||
interface LessonEditorFormProps {
|
||||
lesson: {
|
||||
@@ -12,6 +14,11 @@ interface LessonEditorFormProps {
|
||||
title: string;
|
||||
description?: string | null;
|
||||
videoUrl?: string | null;
|
||||
youtubeUrl?: string | null;
|
||||
isFreePreview?: boolean;
|
||||
contentType: LessonContentType;
|
||||
materialUrl?: string | null;
|
||||
estimatedDurationMinutes: number;
|
||||
};
|
||||
courseSlug: string;
|
||||
}
|
||||
@@ -21,6 +28,29 @@ export function LessonEditorForm({ lesson, courseSlug }: LessonEditorFormProps)
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [title, setTitle] = useState(lesson.title);
|
||||
const [description, setDescription] = useState(lesson.description ?? "");
|
||||
const [youtubeUrl, setYoutubeUrl] = useState(lesson.youtubeUrl ?? "");
|
||||
const [isFreePreview, setIsFreePreview] = useState(lesson.isFreePreview ?? false);
|
||||
const [contentType, setContentType] = useState<LessonContentType>(lesson.contentType);
|
||||
const [materialUrl, setMaterialUrl] = useState(lesson.materialUrl ?? "");
|
||||
const [durationMinutes, setDurationMinutes] = useState(lesson.estimatedDurationMinutes);
|
||||
|
||||
const showSavedToast = () => {
|
||||
const isSpanish = getClientLocale() === "es";
|
||||
toast.success(isSpanish ? "Cambios guardados" : "Changes saved", {
|
||||
description: isSpanish
|
||||
? "Puedes seguir editando o volver al panel de cursos."
|
||||
: "You can keep editing or go back to the courses dashboard.",
|
||||
action: {
|
||||
label: isSpanish ? "Volver a cursos" : "Back to courses",
|
||||
onClick: () => router.push("/teacher"),
|
||||
},
|
||||
cancel: {
|
||||
label: isSpanish ? "Seguir editando" : "Keep editing",
|
||||
onClick: () => {},
|
||||
},
|
||||
duration: 7000,
|
||||
});
|
||||
};
|
||||
|
||||
// 1. Auto-save Video URL when upload finishes
|
||||
const handleVideoUploaded = async (url: string) => {
|
||||
@@ -36,12 +66,20 @@ export function LessonEditorForm({ lesson, courseSlug }: LessonEditorFormProps)
|
||||
}
|
||||
};
|
||||
|
||||
// 2. Save Text Changes (Title/Desc)
|
||||
// 2. Save Text Changes (Title/Desc/YouTube/Preview)
|
||||
const handleSave = async () => {
|
||||
setLoading(true);
|
||||
const res = await updateLesson(lesson.id, { title, description });
|
||||
const res = await updateLesson(lesson.id, {
|
||||
title,
|
||||
description,
|
||||
youtubeUrl: youtubeUrl.trim() || undefined,
|
||||
materialUrl: materialUrl.trim() || undefined,
|
||||
contentType,
|
||||
estimatedDurationMinutes: durationMinutes,
|
||||
isPreview: isFreePreview,
|
||||
});
|
||||
if (res.success) {
|
||||
toast.success("Cambios guardados");
|
||||
showSavedToast();
|
||||
router.refresh();
|
||||
} else {
|
||||
toast.error("Error al guardar cambios");
|
||||
@@ -68,6 +106,17 @@ export function LessonEditorForm({ lesson, courseSlug }: LessonEditorFormProps)
|
||||
onUploadComplete={handleVideoUploaded}
|
||||
/>
|
||||
</div>
|
||||
<div className="border-t border-slate-100 p-6">
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">YouTube URL</label>
|
||||
<input
|
||||
type="url"
|
||||
value={youtubeUrl}
|
||||
onChange={(e) => setYoutubeUrl(e.target.value)}
|
||||
placeholder="https://www.youtube.com/watch?v=..."
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-black"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-slate-500">Si se proporciona, se usará en lugar del video subido en la lección.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Text Content */}
|
||||
@@ -91,11 +140,64 @@ export function LessonEditorForm({ lesson, courseSlug }: LessonEditorFormProps)
|
||||
placeholder="Escribe aquí el contenido de la lección..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">URL de material (PDF / actividad / lectura)</label>
|
||||
<input
|
||||
type="url"
|
||||
value={materialUrl}
|
||||
onChange={(e) => setMaterialUrl(e.target.value)}
|
||||
placeholder="https://.../material.pdf"
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-black"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-slate-500">Se usará en la vista del alumno como lectura o actividad descargable.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* RIGHT: Settings / Actions */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
|
||||
<h3 className="font-semibold text-slate-900 mb-4">Tipo de contenido</h3>
|
||||
<label className="block text-sm text-slate-700 mb-2">Formato de la lección</label>
|
||||
<select
|
||||
value={contentType}
|
||||
onChange={(e) => setContentType(e.target.value as LessonContentType)}
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-black"
|
||||
>
|
||||
{lessonContentTypes.map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{getLessonContentTypeLabel(type)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<p className="mt-2 text-xs text-slate-500">
|
||||
Usa “Evaluación final” para marcar el examen obligatorio del curso.
|
||||
</p>
|
||||
|
||||
<label className="block text-sm text-slate-700 mb-1 mt-4">Duración estimada (minutos)</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={durationMinutes}
|
||||
onChange={(e) => setDurationMinutes(Math.max(0, Number(e.target.value)))}
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-black"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
|
||||
<h3 className="font-semibold text-slate-900 mb-4">Vista previa gratuita</h3>
|
||||
<label className="flex cursor-pointer items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isFreePreview}
|
||||
onChange={(e) => setIsFreePreview(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-slate-300"
|
||||
/>
|
||||
<span className="text-sm text-slate-700">Accesible sin inscripción (teaser)</span>
|
||||
</label>
|
||||
<p className="mt-2 text-xs text-slate-500">Los no inscritos podrán ver esta lección sin comprar el curso.</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
|
||||
<h3 className="font-semibold text-slate-900 mb-4">Acciones</h3>
|
||||
<button
|
||||
@@ -117,4 +219,4 @@ export function LessonEditorForm({ lesson, courseSlug }: LessonEditorFormProps)
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { requireTeacher } from "@/lib/auth/requireTeacher";
|
||||
import { redirect, notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { LessonEditorForm } from "./LessonEditorForm";
|
||||
import { parseLessonDescriptionMeta } from "@/lib/courses/lessonContent";
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
@@ -42,6 +43,8 @@ export default async function LessonPage({ params }: PageProps) {
|
||||
if (!lesson) notFound();
|
||||
if (lesson.module.course.authorId !== user.id) redirect("/teacher");
|
||||
|
||||
const lessonMeta = parseLessonDescriptionMeta(lesson.description);
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-6">
|
||||
{/* Breadcrumbs */}
|
||||
@@ -64,10 +67,13 @@ export default async function LessonPage({ params }: PageProps) {
|
||||
lesson={{
|
||||
...lesson,
|
||||
title: getText(lesson.title),
|
||||
description: getText(lesson.description),
|
||||
description: lessonMeta.text,
|
||||
contentType: lessonMeta.contentType,
|
||||
materialUrl: lessonMeta.materialUrl,
|
||||
estimatedDurationMinutes: Math.max(0, Math.ceil((lesson.estimatedDuration ?? 0) / 60)),
|
||||
}}
|
||||
courseSlug={slug}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ export default async function TeacherDashboardPage() {
|
||||
|
||||
if (!user) {
|
||||
logger.info("User not authorized as teacher, redirecting");
|
||||
redirect("/login");
|
||||
redirect("/auth/login?role=teacher");
|
||||
}
|
||||
|
||||
|
||||
@@ -104,4 +104,4 @@ export default async function TeacherDashboardPage() {
|
||||
logger.error("Critical error in TeacherDashboardPage", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,34 +33,40 @@ export default function CaseStudyDetailPage() {
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-slate-500">{caseStudy.citation} ({caseStudy.year})</p>
|
||||
<h1 className="mt-2 text-4xl font-semibold leading-tight text-[#1f2b3a] md:text-5xl">{caseStudy.title}</h1>
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
<span className="rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold text-slate-700">Topic: {caseStudy.topic}</span>
|
||||
<span className="rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold text-slate-700">
|
||||
Categoria: {caseStudy.category}
|
||||
</span>
|
||||
<span className="rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold text-slate-700">
|
||||
Dificultad: {caseStudy.difficulty}
|
||||
</span>
|
||||
<span className={`rounded-full px-3 py-1 text-xs font-semibold ${levelBadgeClass(caseStudy.level)}`}>Level: {caseStudy.level}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="grid gap-4 lg:grid-cols-[1.35fr_0.8fr]">
|
||||
<div className="acve-panel p-5">
|
||||
<h2 className="text-2xl font-semibold text-[#232b39]">Case Summary</h2>
|
||||
<p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{caseStudy.summary}</p>
|
||||
<h2 className="text-2xl font-semibold text-[#232b39]">Resumen del caso</h2>
|
||||
<p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{caseStudy.summaryEs}</p>
|
||||
|
||||
<h3 className="mt-5 text-lg font-semibold text-[#232b39]">Reading Guide (Placeholder)</h3>
|
||||
<ul className="mt-2 space-y-2 text-sm text-slate-700">
|
||||
<li className="rounded-lg border border-slate-200 bg-white px-3 py-2">1. Identify the legal issue and the jurisdiction context.</li>
|
||||
<li className="rounded-lg border border-slate-200 bg-white px-3 py-2">2. Highlight the key reasoning applied by the court.</li>
|
||||
<li className="rounded-lg border border-slate-200 bg-white px-3 py-2">3. Extract practical implications for drafting or litigation.</li>
|
||||
</ul>
|
||||
<h3 className="mt-5 text-lg font-semibold text-[#232b39]">Resultado Juridico</h3>
|
||||
<p className="mt-2 rounded-lg border border-slate-200 bg-white px-3 py-3 text-sm leading-relaxed text-slate-700">
|
||||
{caseStudy.legalOutcomeEs}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<aside className="acve-panel p-5">
|
||||
<h2 className="text-lg font-semibold text-[#232b39]">Key Legal Terms</h2>
|
||||
<h2 className="text-lg font-semibold text-[#232b39]">Terminos Juridicos Fundamentales</h2>
|
||||
<div className="mt-3 space-y-2">
|
||||
{caseStudy.keyTerms.map((term, index) => (
|
||||
<div key={term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-3">
|
||||
<p className="text-base font-semibold text-brand">{term}</p>
|
||||
<p className="mt-1 text-sm text-slate-600">Legal explanation block {index + 1}</p>
|
||||
{caseStudy.keyTerms.map((term) => (
|
||||
<div key={term.term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-3">
|
||||
<p className="text-base font-semibold text-brand">{term.term}</p>
|
||||
<p className="mt-1 text-sm text-slate-600">{term.definitionEs}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-4 inline-flex rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
|
||||
{caseStudy.quizPrompt}
|
||||
</p>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -53,7 +53,8 @@ export default function CaseStudiesPage() {
|
||||
[{caseStudy.year}] {caseStudy.citation}
|
||||
</p>
|
||||
<div className="mt-2 flex items-center gap-2 text-xs">
|
||||
<span className="rounded-full bg-slate-100 px-2 py-1 text-slate-700">{caseStudy.topic}</span>
|
||||
<span className="rounded-full bg-slate-100 px-2 py-1 text-slate-700">{caseStudy.category}</span>
|
||||
<span className="rounded-full bg-slate-100 px-2 py-1 text-slate-700">{caseStudy.difficulty}</span>
|
||||
<span className={`rounded-full px-2 py-1 font-semibold ${levelBadgeClass(caseStudy.level)}`}>{caseStudy.level}</span>
|
||||
</div>
|
||||
</button>
|
||||
@@ -72,27 +73,35 @@ export default function CaseStudiesPage() {
|
||||
</div>
|
||||
<div className="space-y-2 text-right text-xs">
|
||||
<p className={`rounded-full px-3 py-1 font-semibold ${levelBadgeClass(activeCase.level)}`}>{activeCase.level}</p>
|
||||
<p className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{activeCase.topic}</p>
|
||||
<p className="rounded-full bg-slate-100 px-3 py-1 text-slate-700">{activeCase.category}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="border-t border-slate-200 pt-4">
|
||||
<h3 className="text-2xl font-semibold text-[#232b39]">Case Summary</h3>
|
||||
<p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{activeCase.summary}</p>
|
||||
<h3 className="text-2xl font-semibold text-[#232b39]">Resumen del caso</h3>
|
||||
<p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{activeCase.summaryEs}</p>
|
||||
</section>
|
||||
|
||||
<section className="mt-5">
|
||||
<h3 className="mb-3 text-2xl font-semibold text-[#232b39]">Key Legal Terms Explained</h3>
|
||||
<h3 className="mb-3 text-2xl font-semibold text-[#232b39]">Terminos Juridicos Fundamentales</h3>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{activeCase.keyTerms.map((term) => (
|
||||
<div key={term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-4">
|
||||
<p className="text-lg font-semibold text-brand">{term}</p>
|
||||
<p className="mt-1 text-sm text-slate-600">Detailed explanation will expand in phase 2 content.</p>
|
||||
<div key={term.term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-4">
|
||||
<p className="text-lg font-semibold text-brand">{term.term}</p>
|
||||
<p className="mt-1 text-sm text-slate-600">{term.definitionEs}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mt-5 rounded-xl border border-slate-200 bg-slate-50 p-4">
|
||||
<h3 className="text-xl font-semibold text-[#232b39]">Resultado Juridico</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-slate-700">{activeCase.legalOutcomeEs}</p>
|
||||
<p className="mt-3 inline-flex rounded-full bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-600">
|
||||
{activeCase.quizPrompt}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<Link className="acve-button-secondary mt-6 inline-flex px-4 py-2 text-sm font-semibold hover:bg-brand-soft" href={`/case-studies/${activeCase.slug}`}>
|
||||
Open detail page
|
||||
</Link>
|
||||
|
||||
87
app/(public)/comunidad/page.tsx
Normal file
87
app/(public)/comunidad/page.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import Link from "next/link";
|
||||
|
||||
type CommunityPhoto = {
|
||||
id: string;
|
||||
src: string;
|
||||
alt: string;
|
||||
caption: string;
|
||||
span: string;
|
||||
};
|
||||
|
||||
const communityPhotos: CommunityPhoto[] = [
|
||||
{
|
||||
id: "community-1",
|
||||
src: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1200&q=80",
|
||||
alt: "Equipo colaborando en una mesa de trabajo",
|
||||
caption: "Taller colaborativo",
|
||||
span: "md:col-span-2 md:row-span-2",
|
||||
},
|
||||
{
|
||||
id: "community-2",
|
||||
src: "https://images.unsplash.com/photo-1528901166007-3784c7dd3653?auto=format&fit=crop&w=1200&q=80",
|
||||
alt: "Grupo de estudiantes revisando material",
|
||||
caption: "Cohorte activa",
|
||||
span: "md:col-span-2",
|
||||
},
|
||||
{
|
||||
id: "community-3",
|
||||
src: "https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1200&q=80",
|
||||
alt: "Conversación profesional durante evento",
|
||||
caption: "Networking legal",
|
||||
span: "",
|
||||
},
|
||||
{
|
||||
id: "community-4",
|
||||
src: "https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1200&q=80",
|
||||
alt: "Sesión en auditorio con ponentes",
|
||||
caption: "Masterclass",
|
||||
span: "",
|
||||
},
|
||||
{
|
||||
id: "community-5",
|
||||
src: "https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=1200&q=80",
|
||||
alt: "Personas participando en una dinámica",
|
||||
caption: "Práctica guiada",
|
||||
span: "md:col-span-2",
|
||||
},
|
||||
{
|
||||
id: "community-6",
|
||||
src: "https://images.unsplash.com/photo-1543269865-0a740d43b90c?auto=format&fit=crop&w=1200&q=80",
|
||||
alt: "Estudiantes en jornada formativa",
|
||||
caption: "Comunidad ACVE",
|
||||
span: "",
|
||||
},
|
||||
];
|
||||
|
||||
export default function ComunidadPage() {
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel acve-section-base">
|
||||
<p className="acve-pill mb-4 w-fit">Comunidad ACVE</p>
|
||||
<h1 className="acve-heading text-4xl md:text-5xl">Red de práctica y colaboración</h1>
|
||||
<p className="mt-3 max-w-3xl text-base text-muted-foreground md:text-lg">
|
||||
Collage visual temporal con fotos de referencia para representar talleres, networking y actividades colaborativas.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 grid auto-rows-[150px] grid-cols-2 gap-3 md:auto-rows-[170px] md:grid-cols-4">
|
||||
{communityPhotos.map((photo) => (
|
||||
<figure
|
||||
key={photo.id}
|
||||
className={`group relative overflow-hidden rounded-2xl border border-border/80 bg-card shadow-sm ${photo.span}`}
|
||||
>
|
||||
<img alt={photo.alt} className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]" loading="lazy" src={photo.src} />
|
||||
<figcaption className="absolute inset-x-2 bottom-2 rounded-lg bg-black/55 px-2 py-1 text-xs font-semibold text-white">
|
||||
{photo.caption}
|
||||
</figcaption>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="mt-5 text-sm font-semibold text-primary">Estas imágenes son temporales y se podrán reemplazar por contenido oficial.</p>
|
||||
<Link className="acve-button-secondary mt-6 inline-flex px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/">
|
||||
Regresar al inicio
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,8 @@
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { issueCertificateIfEligible } from "@/lib/certificates";
|
||||
import { refreshStudyRecommendations } from "@/lib/recommendations";
|
||||
|
||||
type ToggleLessonCompleteInput = {
|
||||
courseSlug: string;
|
||||
@@ -86,7 +88,20 @@ export async function toggleLessonComplete({ courseSlug, lessonId }: ToggleLesso
|
||||
});
|
||||
}
|
||||
|
||||
revalidatePath(`/courses/${courseSlug}/learn`);
|
||||
const certificateResult = nextCompleted
|
||||
? await issueCertificateIfEligible(user.id, lesson.module.courseId)
|
||||
: { certificateId: null, certificateNumber: null, newlyIssued: false };
|
||||
|
||||
return { success: true, isCompleted: nextCompleted };
|
||||
revalidatePath(`/courses/${courseSlug}/learn`);
|
||||
revalidatePath("/my-courses");
|
||||
revalidatePath("/profile");
|
||||
await refreshStudyRecommendations(user.id);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
isCompleted: nextCompleted,
|
||||
certificateId: certificateResult.certificateId,
|
||||
certificateNumber: certificateResult.certificateNumber,
|
||||
newlyIssuedCertificate: certificateResult.newlyIssued,
|
||||
};
|
||||
}
|
||||
192
app/(public)/courses/[slug]/learn/page.tsx
Normal file
192
app/(public)/courses/[slug]/learn/page.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import StudentClassroomClient from "@/components/courses/StudentClassroomClient";
|
||||
import { parseLessonDescriptionMeta } from "@/lib/courses/lessonContent";
|
||||
|
||||
type LessonSelect = {
|
||||
id: string;
|
||||
title: unknown;
|
||||
description: unknown;
|
||||
videoUrl: string | null;
|
||||
youtubeUrl: string | null;
|
||||
estimatedDuration: number;
|
||||
isFreePreview: boolean;
|
||||
};
|
||||
type ModuleSelect = { id: string; title: unknown; lessons: LessonSelect[] };
|
||||
type CourseWithModules = { id: string; slug: string; title: unknown; price: unknown; modules: ModuleSelect[] };
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{ slug: string }>;
|
||||
searchParams: Promise<{ lesson?: string }>;
|
||||
};
|
||||
|
||||
export default async function CourseLearnPage({ params, searchParams }: PageProps) {
|
||||
const { slug } = await params;
|
||||
const { lesson: requestedLessonId } = await searchParams;
|
||||
|
||||
const user = await requireUser();
|
||||
|
||||
const courseSelect = {
|
||||
id: true,
|
||||
slug: true,
|
||||
title: true,
|
||||
price: true,
|
||||
modules: {
|
||||
orderBy: { orderIndex: "asc" as const },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
lessons: {
|
||||
orderBy: { orderIndex: "asc" as const },
|
||||
select: {
|
||||
id: true,
|
||||
title: true,
|
||||
description: true,
|
||||
videoUrl: true,
|
||||
youtubeUrl: true,
|
||||
estimatedDuration: true,
|
||||
isFreePreview: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const course = (await db.course.findUnique({
|
||||
where: { slug },
|
||||
select: courseSelect,
|
||||
})) as CourseWithModules | null;
|
||||
|
||||
if (!course) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
let enrollment: { id: string } | null = null;
|
||||
let isEnrolled: boolean;
|
||||
|
||||
if (!user?.id) {
|
||||
// Anonymous: no enrollment, preview-only access
|
||||
const allLessons = course.modules.flatMap((m) =>
|
||||
m.lessons.map((l) => ({ id: l.id, isFreePreview: l.isFreePreview }))
|
||||
);
|
||||
const firstPreviewLesson = allLessons.find((l) => l.isFreePreview);
|
||||
if (!firstPreviewLesson) {
|
||||
redirect(`/courses/${slug}`);
|
||||
}
|
||||
isEnrolled = false;
|
||||
} else {
|
||||
enrollment = await db.enrollment.findUnique({
|
||||
where: {
|
||||
userId_courseId: {
|
||||
userId: user.id,
|
||||
courseId: course.id,
|
||||
},
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
|
||||
const isFree = Number(course.price) === 0;
|
||||
|
||||
if (!enrollment) {
|
||||
if (isFree) {
|
||||
enrollment = await db.enrollment.create({
|
||||
data: {
|
||||
userId: user.id,
|
||||
courseId: course.id,
|
||||
amountPaid: 0,
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
isEnrolled = true;
|
||||
} else {
|
||||
// Paid course, no enrollment: allow only if there are preview lessons
|
||||
const allLessons = course.modules.flatMap((m) =>
|
||||
m.lessons.map((l) => ({ id: l.id, isFreePreview: l.isFreePreview }))
|
||||
);
|
||||
const firstPreviewLesson = allLessons.find((l) => l.isFreePreview);
|
||||
if (!firstPreviewLesson) {
|
||||
redirect(`/courses/${slug}`);
|
||||
}
|
||||
isEnrolled = false;
|
||||
}
|
||||
} else {
|
||||
isEnrolled = true;
|
||||
}
|
||||
}
|
||||
|
||||
const completedProgress =
|
||||
isEnrolled && user
|
||||
? await db.userProgress.findMany({
|
||||
where: {
|
||||
userId: user.id,
|
||||
isCompleted: true,
|
||||
lesson: {
|
||||
module: { courseId: course.id },
|
||||
},
|
||||
},
|
||||
select: { lessonId: true },
|
||||
})
|
||||
: [];
|
||||
|
||||
const modules = course.modules.map((module) => ({
|
||||
id: module.id,
|
||||
title: getText(module.title) || "Untitled module",
|
||||
lessons: module.lessons.map((lesson) => {
|
||||
const lessonMeta = parseLessonDescriptionMeta(lesson.description);
|
||||
return {
|
||||
id: lesson.id,
|
||||
title: getText(lesson.title) || "Untitled lesson",
|
||||
description: lessonMeta.text,
|
||||
contentType: lessonMeta.contentType,
|
||||
materialUrl: lessonMeta.materialUrl,
|
||||
videoUrl: lesson.videoUrl,
|
||||
youtubeUrl: lesson.youtubeUrl,
|
||||
estimatedDuration: lesson.estimatedDuration,
|
||||
isFreePreview: lesson.isFreePreview,
|
||||
};
|
||||
}),
|
||||
}));
|
||||
|
||||
const flattenedLessons = modules.flatMap((module) => module.lessons);
|
||||
const flattenedLessonIds = flattenedLessons.map((l) => l.id);
|
||||
|
||||
let initialSelectedLessonId: string;
|
||||
if (isEnrolled) {
|
||||
initialSelectedLessonId =
|
||||
requestedLessonId && flattenedLessonIds.includes(requestedLessonId)
|
||||
? requestedLessonId
|
||||
: flattenedLessonIds[0] ?? "";
|
||||
} else {
|
||||
const firstPreview = flattenedLessons.find((l) => l.isFreePreview);
|
||||
const requestedLesson = requestedLessonId
|
||||
? flattenedLessons.find((l) => l.id === requestedLessonId)
|
||||
: null;
|
||||
if (requestedLesson?.isFreePreview) {
|
||||
initialSelectedLessonId = requestedLessonId!;
|
||||
} else {
|
||||
initialSelectedLessonId = firstPreview?.id ?? "";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<StudentClassroomClient
|
||||
courseSlug={course.slug}
|
||||
courseTitle={getText(course.title) || "Untitled course"}
|
||||
modules={modules}
|
||||
initialSelectedLessonId={initialSelectedLessonId}
|
||||
initialCompletedLessonIds={completedProgress.map((p) => p.lessonId)}
|
||||
isEnrolled={isEnrolled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,184 +1,169 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import CourseDetailHeader from "@/components/courses/CourseDetailHeader";
|
||||
import CourseProgressCard from "@/components/courses/CourseProgressCard";
|
||||
import ProgramContentList from "@/components/courses/ProgramContentList";
|
||||
import { getCourseDetailViewModel } from "@/lib/courses/publicCourses";
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
const levelLabel = (level: string) => {
|
||||
if (level === "BEGINNER") return "Beginner";
|
||||
if (level === "INTERMEDIATE") return "Intermediate";
|
||||
if (level === "ADVANCED") return "Advanced";
|
||||
return level;
|
||||
};
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{ slug: string }>;
|
||||
};
|
||||
|
||||
type DetailActionState = {
|
||||
primaryAction: {
|
||||
label: string;
|
||||
href?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
secondaryAction?: {
|
||||
label: string;
|
||||
href?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
helperText?: string;
|
||||
};
|
||||
|
||||
function buildActionState(args: {
|
||||
slug: string;
|
||||
isAuthenticated: boolean;
|
||||
isEnrolled: boolean;
|
||||
availabilityState: "published" | "upcoming" | "draft";
|
||||
progressPercent: number;
|
||||
firstPreviewLessonId: string | null;
|
||||
price: number;
|
||||
}): DetailActionState {
|
||||
const learnUrl = `/courses/${args.slug}/learn`;
|
||||
const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(`/courses/${args.slug}`)}`;
|
||||
const previewUrl = args.firstPreviewLessonId ? `${learnUrl}?lesson=${args.firstPreviewLessonId}` : undefined;
|
||||
|
||||
if (args.availabilityState !== "published") {
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Próximamente",
|
||||
disabled: true,
|
||||
},
|
||||
helperText: "Este programa se encuentra en preparación editorial y estará habilitado en próximas publicaciones.",
|
||||
};
|
||||
}
|
||||
|
||||
if (args.isAuthenticated && args.isEnrolled) {
|
||||
const label = args.progressPercent >= 100 ? "Revisar programa" : args.progressPercent > 0 ? "Continuar" : "Comenzar";
|
||||
return {
|
||||
primaryAction: {
|
||||
label,
|
||||
href: learnUrl,
|
||||
},
|
||||
helperText:
|
||||
args.progressPercent > 0
|
||||
? "Tu avance se conserva automáticamente. Puedes continuar desde la lección más reciente."
|
||||
: "Inicia el recorrido académico desde el primer módulo.",
|
||||
};
|
||||
}
|
||||
|
||||
if (args.isAuthenticated) {
|
||||
if (args.price <= 0) {
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Comenzar",
|
||||
href: learnUrl,
|
||||
},
|
||||
helperText: "Programa con acceso abierto para iniciar de inmediato.",
|
||||
};
|
||||
}
|
||||
|
||||
if (previewUrl) {
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Ver clase de muestra",
|
||||
href: previewUrl,
|
||||
},
|
||||
helperText: "El contenido completo está disponible para estudiantes inscritos en el programa.",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Inscripción próximamente",
|
||||
disabled: true,
|
||||
},
|
||||
helperText: "La inscripción completa para este programa estará disponible en breve.",
|
||||
};
|
||||
}
|
||||
|
||||
if (previewUrl) {
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Ver clase de muestra",
|
||||
href: previewUrl,
|
||||
},
|
||||
secondaryAction: {
|
||||
label: "Iniciar sesión",
|
||||
href: loginUrl,
|
||||
},
|
||||
helperText: "Puedes revisar una vista previa o iniciar sesión para gestionar tu itinerario académico.",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
primaryAction: {
|
||||
label: "Iniciar sesión para comenzar",
|
||||
href: loginUrl,
|
||||
},
|
||||
helperText: "Accede con tu cuenta para comenzar este programa y registrar tu progreso.",
|
||||
};
|
||||
}
|
||||
|
||||
export default async function CourseDetailPage({ params }: PageProps) {
|
||||
const { slug } = await params;
|
||||
const user = await requireUser().catch(() => null);
|
||||
|
||||
const course = await db.course.findFirst({
|
||||
where: { slug, status: "PUBLISHED" },
|
||||
include: {
|
||||
author: { select: { fullName: true } },
|
||||
modules: {
|
||||
orderBy: { orderIndex: "asc" },
|
||||
include: {
|
||||
lessons: {
|
||||
orderBy: { orderIndex: "asc" },
|
||||
select: { id: true, title: true, estimatedDuration: true },
|
||||
},
|
||||
},
|
||||
},
|
||||
_count: { select: { enrollments: true } },
|
||||
},
|
||||
});
|
||||
|
||||
const course = await getCourseDetailViewModel(slug, user?.id ?? null);
|
||||
if (!course) notFound();
|
||||
|
||||
const user = await requireUser();
|
||||
const isAuthed = Boolean(user?.id);
|
||||
|
||||
const title = getText(course.title) || "Untitled course";
|
||||
const summary = getText(course.description) || "";
|
||||
|
||||
const lessons = course.modules.flatMap((m) =>
|
||||
m.lessons.map((l) => ({
|
||||
id: l.id,
|
||||
title: getText(l.title) || "Untitled lesson",
|
||||
minutes: Math.ceil((l.estimatedDuration ?? 0) / 60),
|
||||
})),
|
||||
);
|
||||
const lessonsCount = lessons.length;
|
||||
|
||||
const redirect = `/courses/${course.slug}/learn`;
|
||||
const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(redirect)}`;
|
||||
|
||||
const learningOutcomes = [
|
||||
"Understand key legal vocabulary in context",
|
||||
"Apply contract and case analysis patterns",
|
||||
"Improve professional written legal communication",
|
||||
];
|
||||
const actions = buildActionState({
|
||||
slug: course.slug,
|
||||
isAuthenticated: Boolean(user?.id),
|
||||
isEnrolled: course.isEnrolled,
|
||||
availabilityState: course.availabilityState,
|
||||
progressPercent: course.progressPercent,
|
||||
firstPreviewLessonId: course.firstPreviewLessonId,
|
||||
price: course.price,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel overflow-hidden p-0">
|
||||
<div className="grid gap-0 lg:grid-cols-[1.6fr_0.9fr]">
|
||||
<div className="acve-section-base">
|
||||
<Link className="inline-flex items-center gap-2 text-base text-slate-600 hover:text-brand" href="/courses">
|
||||
<span>{"<-"}</span>
|
||||
Back to Courses
|
||||
</Link>
|
||||
<section className="grid items-start gap-5 xl:grid-cols-[1.55fr_0.95fr]">
|
||||
<CourseDetailHeader
|
||||
availabilityLabel={course.availabilityLabel}
|
||||
availabilityState={course.availabilityState}
|
||||
description={course.longDescription}
|
||||
durationLabel={course.durationLabel}
|
||||
instructor={course.instructor}
|
||||
lessonCount={course.lessonCount}
|
||||
proficiencyLabel={course.proficiencyLabel}
|
||||
stageLabel={course.stage.levelLabel}
|
||||
studentsCount={course.studentsCount}
|
||||
thumbnailUrl={course.thumbnailUrl}
|
||||
title={course.title}
|
||||
/>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2 text-sm text-slate-600">
|
||||
<span className="rounded-full bg-accent px-3 py-1 font-semibold text-white">
|
||||
{levelLabel(course.level)}
|
||||
</span>
|
||||
<span className="rounded-full border border-slate-300 bg-white px-3 py-1 font-semibold">
|
||||
{course.status.toLowerCase()}
|
||||
</span>
|
||||
<span className="rounded-full border border-slate-300 bg-white px-3 py-1">
|
||||
{lessonsCount} lessons
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="mt-4 text-4xl font-semibold leading-tight text-[#1f2a3a] md:text-5xl">{title}</h1>
|
||||
<p className="mt-3 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg">{summary}</p>
|
||||
|
||||
<div className="mt-5 grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Students</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">
|
||||
{course._count.enrollments.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Lessons</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">{lessonsCount}</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Instructor</p>
|
||||
<p className="mt-1 text-lg font-semibold text-slate-900">
|
||||
{course.author.fullName || "ACVE Team"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside className="border-t border-slate-200 bg-slate-50/80 p-6 lg:border-l lg:border-t-0">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wide text-slate-500">What you will learn</h2>
|
||||
<ul className="mt-3 space-y-2">
|
||||
{learningOutcomes.map((item) => (
|
||||
<li key={item} className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
<CourseProgressCard
|
||||
availabilityLabel={course.availabilityLabel}
|
||||
completedLessons={course.completedLessons}
|
||||
durationLabel={course.durationLabel}
|
||||
helperText={actions.helperText}
|
||||
instructor={course.instructor}
|
||||
primaryAction={actions.primaryAction}
|
||||
progressPercent={course.progressPercent}
|
||||
secondaryAction={actions.secondaryAction}
|
||||
stageLabel={course.stage.levelLabel}
|
||||
totalLessons={course.totalLessons}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-5 lg:grid-cols-[1.6fr_0.85fr]">
|
||||
<article className="acve-panel acve-section-base">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">Course structure preview</h2>
|
||||
<div className="mt-4 grid gap-2">
|
||||
{lessons.slice(0, 5).map((lesson, index) => (
|
||||
<div
|
||||
key={lesson.id}
|
||||
className="flex items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<span className="font-medium text-slate-800">
|
||||
Lesson {index + 1}: {lesson.title}
|
||||
</span>
|
||||
<span className="text-slate-500">{lesson.minutes} min</span>
|
||||
</div>
|
||||
))}
|
||||
{lessons.length === 0 && (
|
||||
<p className="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
|
||||
No lessons yet. Check back soon.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside className="acve-panel space-y-5 p-6">
|
||||
<h2 className="text-2xl text-slate-700 md:text-4xl">Course details</h2>
|
||||
<div className="border-t border-slate-200 pt-5 text-lg text-slate-700 md:text-3xl">
|
||||
<p className="mb-1 text-base text-slate-500 md:text-2xl">Instructor</p>
|
||||
<p className="mb-4 font-semibold text-slate-800">{course.author.fullName || "ACVE Team"}</p>
|
||||
<p className="mb-1 text-base text-slate-500 md:text-2xl">Level</p>
|
||||
<p className="mb-4 font-semibold text-slate-800">{levelLabel(course.level)}</p>
|
||||
<p className="mb-1 text-base text-slate-500 md:text-2xl">Lessons</p>
|
||||
<p className="font-semibold text-slate-800">{lessonsCount}</p>
|
||||
</div>
|
||||
{isAuthed ? (
|
||||
<Link
|
||||
className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105"
|
||||
href={redirect}
|
||||
>
|
||||
Start Course
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105"
|
||||
href={loginUrl}
|
||||
>
|
||||
Login to start
|
||||
</Link>
|
||||
)}
|
||||
</aside>
|
||||
</section>
|
||||
<ProgramContentList modules={course.modules} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,93 +1,35 @@
|
||||
import CourseCard from "@/components/CourseCard";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import CourseCatalogIntro from "@/components/courses/CourseCatalogIntro";
|
||||
import CourseLevelTabs from "@/components/courses/CourseLevelTabs";
|
||||
import ProgramSection from "@/components/courses/ProgramSection";
|
||||
import { getCourseCatalogViewModel } from "@/lib/courses/publicCourses";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function CoursesPage() {
|
||||
const courses = await db.course.findMany({
|
||||
where: {
|
||||
status: "PUBLISHED",
|
||||
},
|
||||
include: {
|
||||
author: {
|
||||
select: {
|
||||
fullName: true,
|
||||
},
|
||||
},
|
||||
modules: {
|
||||
select: {
|
||||
_count: {
|
||||
select: {
|
||||
lessons: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
_count: {
|
||||
select: {
|
||||
enrollments: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: {
|
||||
updatedAt: "desc",
|
||||
},
|
||||
});
|
||||
|
||||
const totalLessons = courses.reduce(
|
||||
(total, course) => total + course.modules.reduce((courseTotal, module) => courseTotal + module._count.lessons, 0),
|
||||
0,
|
||||
);
|
||||
const user = await requireUser().catch(() => null);
|
||||
const catalog = await getCourseCatalogViewModel(user?.id ?? null);
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel overflow-hidden p-0">
|
||||
<div className="grid gap-0 lg:grid-cols-[1.45fr_0.95fr]">
|
||||
<div className="acve-section-base">
|
||||
<p className="acve-pill mb-4 w-fit">Course Catalog</p>
|
||||
<h1 className="text-3xl font-semibold leading-tight text-[#202a39] md:text-4xl">Build your legal English learning path</h1>
|
||||
<p className="mt-3 max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
|
||||
Discover our published legal English courses and start with the path that matches your level.
|
||||
</p>
|
||||
<div className="mt-5 grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Total Courses</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">{courses.length}</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Published Lessons</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">{totalLessons}</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Instructors</p>
|
||||
<p className="mt-1 text-2xl font-semibold text-slate-900">
|
||||
{new Set(courses.map((course) => course.author.fullName || "ACVE Team")).size}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CourseCatalogIntro
|
||||
instructorCount={catalog.totals.instructorCount}
|
||||
totalCourses={catalog.totals.totalCourses}
|
||||
totalLessons={catalog.totals.totalLessons}
|
||||
/>
|
||||
|
||||
<aside className="border-t border-slate-200 bg-slate-50/80 p-5 lg:border-l lg:border-t-0">
|
||||
<h2 className="text-base font-semibold text-slate-800">Open Access</h2>
|
||||
<p className="mt-2 text-sm text-slate-600">
|
||||
This catalog is public. Open any course card to visit the landing page and enroll.
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
<CourseLevelTabs
|
||||
items={catalog.sections.map((section) => ({
|
||||
id: section.id,
|
||||
label: section.tabLabel,
|
||||
anchorId: section.anchorId,
|
||||
count: section.courses.length,
|
||||
}))}
|
||||
/>
|
||||
|
||||
{courses.length === 0 ? (
|
||||
<section className="acve-panel acve-section-base">
|
||||
<div className="rounded-xl border border-dashed border-slate-300 bg-slate-50 px-6 py-12 text-center">
|
||||
<h2 className="text-2xl font-semibold text-slate-900">Coming Soon</h2>
|
||||
<p className="mt-2 text-slate-600">We are preparing new courses. Please check back shortly.</p>
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{courses.map((course) => (
|
||||
<CourseCard key={course.slug} course={course} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{catalog.sections.map((section) => (
|
||||
<ProgramSection key={section.id} section={section} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
462
app/(public)/eventos/page.tsx
Normal file
462
app/(public)/eventos/page.tsx
Normal file
@@ -0,0 +1,462 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { type FormEvent, useEffect, useMemo, useState } from "react";
|
||||
import { readDemoClientAuth } from "@/lib/auth/clientAuth";
|
||||
import { supabaseBrowser } from "@/lib/supabase/browser";
|
||||
|
||||
type EventItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
date: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
mode: string;
|
||||
location: string;
|
||||
summary: string;
|
||||
details: string;
|
||||
thumbnail: string;
|
||||
};
|
||||
|
||||
type EventDraft = {
|
||||
title: string;
|
||||
date: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
mode: string;
|
||||
location: string;
|
||||
summary: string;
|
||||
details: string;
|
||||
thumbnail: string;
|
||||
};
|
||||
|
||||
const EVENTS_STORAGE_KEY = "acve.custom-events.v1";
|
||||
const defaultThumbnail =
|
||||
"https://images.unsplash.com/photo-1511578314322-379afb476865?auto=format&fit=crop&w=1200&q=80";
|
||||
|
||||
const defaultEvents: EventItem[] = [
|
||||
{
|
||||
id: "launch-day-2026-03-20",
|
||||
title: "Launch Day ACVE",
|
||||
date: "2026-03-20",
|
||||
startTime: "18:00",
|
||||
endTime: "20:30",
|
||||
mode: "Híbrido",
|
||||
location: "Monterrey",
|
||||
summary: "Presentación oficial de ACVE, agenda académica y networking inicial.",
|
||||
details:
|
||||
"Sesión inaugural con bienvenida institucional, visión del programa 2026 y espacio de networking para alumnos, docentes e invitados del sector legal.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1528605248644-14dd04022da1?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "webinar-drafting-2026-03-27",
|
||||
title: "Webinar: Legal Drafting in English",
|
||||
date: "2026-03-27",
|
||||
startTime: "19:00",
|
||||
endTime: "20:15",
|
||||
mode: "Online",
|
||||
location: "Zoom ACVE",
|
||||
summary: "Buenas prácticas para redactar cláusulas con claridad y precisión.",
|
||||
details:
|
||||
"Revisión de estructura, vocabulario funcional y errores frecuentes en contratos internacionales. Incluye sesión breve de preguntas al final.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1543269865-cbf427effbad?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "qa-session-2026-04-05",
|
||||
title: "Q&A de Cohorte",
|
||||
date: "2026-04-05",
|
||||
startTime: "17:30",
|
||||
endTime: "18:30",
|
||||
mode: "Streaming",
|
||||
location: "Campus Virtual ACVE",
|
||||
summary: "Resolución de dudas académicas y guía de estudio para la siguiente unidad.",
|
||||
details:
|
||||
"Encuentro en vivo para alinear progreso de la cohorte, resolver dudas de contenido y compartir recomendaciones de práctica.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1515169067868-5387ec356754?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "workshop-monterrey-2026-04-18",
|
||||
title: "Workshop Presencial",
|
||||
date: "2026-04-18",
|
||||
startTime: "10:00",
|
||||
endTime: "13:00",
|
||||
mode: "Presencial",
|
||||
location: "Monterrey",
|
||||
summary: "Simulación de negociación y revisión colaborativa de cláusulas.",
|
||||
details:
|
||||
"Taller práctico con actividades por equipos para aplicar vocabulario jurídico en contexto de negociación y redacción de términos clave.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1475721027785-f74eccf877e2?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "networking-night-2026-05-02",
|
||||
title: "Networking Night",
|
||||
date: "2026-05-02",
|
||||
startTime: "19:30",
|
||||
endTime: "21:00",
|
||||
mode: "Híbrido",
|
||||
location: "Monterrey + Online",
|
||||
summary: "Conexión entre estudiantes, alumni y profesores ACVE.",
|
||||
details:
|
||||
"Espacio informal para compartir experiencias, oportunidades de colaboración y avances en el uso profesional del inglés legal.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1528909514045-2fa4ac7a08ba?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
];
|
||||
|
||||
const blankDraft: EventDraft = {
|
||||
title: "",
|
||||
date: "",
|
||||
startTime: "18:00",
|
||||
endTime: "19:00",
|
||||
mode: "Online",
|
||||
location: "Monterrey",
|
||||
summary: "",
|
||||
details: "",
|
||||
thumbnail: "",
|
||||
};
|
||||
|
||||
function parseDateInUtc(value: string): Date {
|
||||
const [year, month, day] = value.split("-").map(Number);
|
||||
return new Date(Date.UTC(year, month - 1, day));
|
||||
}
|
||||
|
||||
function sortEvents(items: EventItem[]): EventItem[] {
|
||||
return [...items].sort((a, b) => {
|
||||
if (a.date !== b.date) return a.date.localeCompare(b.date);
|
||||
return a.startTime.localeCompare(b.startTime);
|
||||
});
|
||||
}
|
||||
|
||||
function formatCardDate(value: string) {
|
||||
const date = parseDateInUtc(value);
|
||||
return {
|
||||
day: new Intl.DateTimeFormat("es-MX", { day: "2-digit", timeZone: "UTC" }).format(date),
|
||||
month: new Intl.DateTimeFormat("es-MX", { month: "short", timeZone: "UTC" }).format(date).toUpperCase(),
|
||||
};
|
||||
}
|
||||
|
||||
function formatLongDate(value: string): string {
|
||||
return new Intl.DateTimeFormat("es-MX", {
|
||||
weekday: "long",
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
timeZone: "UTC",
|
||||
}).format(parseDateInUtc(value));
|
||||
}
|
||||
|
||||
function isEventItem(value: unknown): value is EventItem {
|
||||
if (!value || typeof value !== "object") return false;
|
||||
const record = value as Record<string, unknown>;
|
||||
return (
|
||||
typeof record.id === "string" &&
|
||||
typeof record.title === "string" &&
|
||||
typeof record.date === "string" &&
|
||||
typeof record.startTime === "string" &&
|
||||
typeof record.endTime === "string" &&
|
||||
typeof record.mode === "string" &&
|
||||
typeof record.location === "string" &&
|
||||
typeof record.summary === "string" &&
|
||||
typeof record.details === "string" &&
|
||||
typeof record.thumbnail === "string"
|
||||
);
|
||||
}
|
||||
|
||||
export default function EventosPage() {
|
||||
const [selectedEvent, setSelectedEvent] = useState<EventItem | null>(null);
|
||||
const [addedEvents, setAddedEvents] = useState<EventItem[]>([]);
|
||||
const [draft, setDraft] = useState<EventDraft>(blankDraft);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [isTeacher, setIsTeacher] = useState(false);
|
||||
const [isCheckingRole, setIsCheckingRole] = useState(true);
|
||||
|
||||
const orderedEvents = useMemo(() => sortEvents([...defaultEvents, ...addedEvents]), [addedEvents]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
const stored = window.localStorage.getItem(EVENTS_STORAGE_KEY);
|
||||
if (!stored) return;
|
||||
const parsed = JSON.parse(stored);
|
||||
if (Array.isArray(parsed)) {
|
||||
setAddedEvents(parsed.filter(isEventItem));
|
||||
}
|
||||
} catch {
|
||||
setAddedEvents([]);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
window.localStorage.setItem(EVENTS_STORAGE_KEY, JSON.stringify(sortEvents(addedEvents)));
|
||||
}, [addedEvents]);
|
||||
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
const demoSnapshot = readDemoClientAuth();
|
||||
const client = supabaseBrowser();
|
||||
|
||||
if (!client) {
|
||||
setIsTeacher(demoSnapshot.isTeacher);
|
||||
setIsCheckingRole(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const resolveTeacherRole = async () => {
|
||||
try {
|
||||
const {
|
||||
data: { user },
|
||||
} = await client.auth.getUser();
|
||||
|
||||
if (!mounted) return;
|
||||
if (!user) {
|
||||
setIsTeacher(demoSnapshot.isTeacher);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch("/api/auth/session", { cache: "no-store" });
|
||||
if (!mounted) return;
|
||||
|
||||
const payload = (await response.json()) as { isTeacher?: boolean };
|
||||
setIsTeacher(payload.isTeacher === true || demoSnapshot.isTeacher);
|
||||
} catch {
|
||||
if (mounted) setIsTeacher(demoSnapshot.isTeacher);
|
||||
} finally {
|
||||
if (mounted) setIsCheckingRole(false);
|
||||
}
|
||||
};
|
||||
|
||||
void resolveTeacherRole();
|
||||
|
||||
const {
|
||||
data: { subscription },
|
||||
} = client.auth.onAuthStateChange(() => {
|
||||
void resolveTeacherRole();
|
||||
});
|
||||
|
||||
return () => {
|
||||
mounted = false;
|
||||
subscription.unsubscribe();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleAddEvent = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
if (!isTeacher) {
|
||||
setFormError("Solo docentes pueden agregar eventos.");
|
||||
return;
|
||||
}
|
||||
|
||||
const required = [draft.title, draft.date, draft.startTime, draft.endTime, draft.mode, draft.location, draft.summary, draft.details];
|
||||
if (required.some((field) => field.trim().length === 0)) {
|
||||
setFormError("Completa todos los campos obligatorios para publicar el evento.");
|
||||
return;
|
||||
}
|
||||
|
||||
setAddedEvents((previous) => [
|
||||
...previous,
|
||||
{
|
||||
id: typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now()}`,
|
||||
title: draft.title.trim(),
|
||||
date: draft.date,
|
||||
startTime: draft.startTime,
|
||||
endTime: draft.endTime,
|
||||
mode: draft.mode.trim(),
|
||||
location: draft.location.trim(),
|
||||
summary: draft.summary.trim(),
|
||||
details: draft.details.trim(),
|
||||
thumbnail: draft.thumbnail.trim() || defaultThumbnail,
|
||||
},
|
||||
]);
|
||||
|
||||
setDraft(blankDraft);
|
||||
setFormError(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel acve-section-base">
|
||||
<p className="acve-pill mb-4 w-fit">Eventos ACVE</p>
|
||||
<h1 className="acve-heading text-4xl md:text-5xl">Calendario académico y networking</h1>
|
||||
<p className="mt-3 max-w-3xl text-base text-muted-foreground md:text-lg">
|
||||
Eventos ordenados cronológicamente. Haz clic en cualquier tarjeta para ver el detalle completo del evento.
|
||||
</p>
|
||||
|
||||
<div className="acve-scrollbar-none mt-8 flex gap-4 overflow-x-auto pb-2">
|
||||
{orderedEvents.map((eventCard) => {
|
||||
const cardDate = formatCardDate(eventCard.date);
|
||||
return (
|
||||
<button
|
||||
key={eventCard.id}
|
||||
className="group relative flex min-h-[272px] min-w-[292px] max-w-[320px] flex-col overflow-hidden rounded-2xl border border-border/80 bg-card text-left shadow-sm transition hover:-translate-y-0.5 hover:border-primary/45 hover:shadow-md"
|
||||
type="button"
|
||||
onClick={() => setSelectedEvent(eventCard)}
|
||||
>
|
||||
<div className="h-32 w-full overflow-hidden border-b border-border/70">
|
||||
<img
|
||||
alt={`Miniatura de ${eventCard.title}`}
|
||||
className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
|
||||
loading="lazy"
|
||||
src={eventCard.thumbnail}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-xl border border-primary/25 bg-primary/10 px-2 py-1 text-center text-primary">
|
||||
<p className="text-lg font-bold leading-none">{cardDate.day}</p>
|
||||
<p className="text-[11px] font-semibold tracking-wide">{cardDate.month}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">{eventCard.mode}</p>
|
||||
<h2 className="text-base font-semibold text-foreground">{eventCard.title}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-sm text-muted-foreground">{eventCard.summary}</p>
|
||||
<p className="mt-auto pt-4 text-xs font-semibold uppercase tracking-wide text-primary">{eventCard.location}</p>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<Link className="acve-button-secondary inline-flex px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/#eventos">
|
||||
Ver sección de eventos en Inicio
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="acve-panel acve-section-base border-dashed">
|
||||
<h2 className="acve-heading text-2xl md:text-3xl">Gestión de eventos</h2>
|
||||
<p className="mt-2 text-sm text-muted-foreground md:text-base">Solo el equipo docente puede publicar nuevos eventos en este tablero.</p>
|
||||
|
||||
{isCheckingRole ? (
|
||||
<p className="mt-4 text-sm text-muted-foreground">Verificando permisos...</p>
|
||||
) : null}
|
||||
|
||||
{!isCheckingRole && !isTeacher ? (
|
||||
<p className="mt-4 rounded-xl border border-border/80 bg-card/70 px-4 py-3 text-sm text-muted-foreground">
|
||||
Tu perfil actual no tiene permisos de publicación. Si eres docente, inicia sesión con tu cuenta de profesor.
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{!isCheckingRole && isTeacher ? (
|
||||
<form className="mt-6 grid gap-3 md:grid-cols-2" onSubmit={handleAddEvent}>
|
||||
<input
|
||||
required
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
|
||||
placeholder="Título del evento"
|
||||
value={draft.title}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, title: event.target.value }))}
|
||||
/>
|
||||
<input
|
||||
required
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
|
||||
type="date"
|
||||
value={draft.date}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, date: event.target.value }))}
|
||||
/>
|
||||
<input
|
||||
required
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
|
||||
type="time"
|
||||
value={draft.startTime}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, startTime: event.target.value }))}
|
||||
/>
|
||||
<input
|
||||
required
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
|
||||
type="time"
|
||||
value={draft.endTime}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, endTime: event.target.value }))}
|
||||
/>
|
||||
<input
|
||||
required
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
|
||||
placeholder="Modalidad (Online, Presencial, Híbrido)"
|
||||
value={draft.mode}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, mode: event.target.value }))}
|
||||
/>
|
||||
<input
|
||||
required
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
|
||||
placeholder="Ubicación"
|
||||
value={draft.location}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, location: event.target.value }))}
|
||||
/>
|
||||
<textarea
|
||||
required
|
||||
className="min-h-[92px] rounded-xl border border-border bg-background px-3 py-2 text-sm md:col-span-2"
|
||||
placeholder="Resumen breve para la tarjeta"
|
||||
value={draft.summary}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, summary: event.target.value }))}
|
||||
/>
|
||||
<textarea
|
||||
required
|
||||
className="min-h-[120px] rounded-xl border border-border bg-background px-3 py-2 text-sm md:col-span-2"
|
||||
placeholder="Detalle completo para el popup"
|
||||
value={draft.details}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, details: event.target.value }))}
|
||||
/>
|
||||
<input
|
||||
className="rounded-xl border border-border bg-background px-3 py-2 text-sm md:col-span-2"
|
||||
placeholder="URL de miniatura (opcional)"
|
||||
value={draft.thumbnail}
|
||||
onChange={(event) => setDraft((previous) => ({ ...previous, thumbnail: event.target.value }))}
|
||||
/>
|
||||
|
||||
{formError ? <p className="text-sm font-medium text-primary md:col-span-2">{formError}</p> : null}
|
||||
|
||||
<button className="acve-button-primary inline-flex w-fit items-center justify-center px-5 py-2.5 text-sm font-semibold md:col-span-2" type="submit">
|
||||
Publicar evento
|
||||
</button>
|
||||
</form>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
{selectedEvent ? (
|
||||
<div
|
||||
aria-modal="true"
|
||||
className="fixed inset-0 z-[70] flex items-center justify-center bg-black/55 p-4"
|
||||
role="dialog"
|
||||
onClick={() => setSelectedEvent(null)}
|
||||
>
|
||||
<article
|
||||
className="acve-panel relative w-full max-w-3xl overflow-hidden shadow-2xl"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
aria-label="Cerrar detalle del evento"
|
||||
className="absolute right-3 top-3 z-10 rounded-full border border-white/70 bg-white/90 px-3 py-1 text-xs font-semibold text-foreground hover:bg-white"
|
||||
type="button"
|
||||
onClick={() => setSelectedEvent(null)}
|
||||
>
|
||||
Cerrar
|
||||
</button>
|
||||
|
||||
<div className="h-52 w-full overflow-hidden border-b border-border/70 md:h-72">
|
||||
<img alt={`Imagen del evento ${selectedEvent.title}`} className="h-full w-full object-cover" src={selectedEvent.thumbnail} />
|
||||
</div>
|
||||
|
||||
<div className="p-5 md:p-7">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">
|
||||
{formatLongDate(selectedEvent.date)} · {selectedEvent.startTime} - {selectedEvent.endTime}
|
||||
</p>
|
||||
<h3 className="mt-2 text-2xl font-semibold text-foreground md:text-3xl">{selectedEvent.title}</h3>
|
||||
<p className="mt-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{selectedEvent.mode} · {selectedEvent.location}
|
||||
</p>
|
||||
<p className="mt-4 text-sm leading-relaxed text-muted-foreground md:text-base">{selectedEvent.details}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
108
app/(public)/noticias/page.tsx
Normal file
108
app/(public)/noticias/page.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import Link from "next/link";
|
||||
|
||||
type NewsPost = {
|
||||
id: string;
|
||||
title: string;
|
||||
date: string;
|
||||
category: string;
|
||||
excerpt: string;
|
||||
bodyPreview: string;
|
||||
thumbnail: string;
|
||||
};
|
||||
|
||||
const newsPosts: NewsPost[] = [
|
||||
{
|
||||
id: "news-1",
|
||||
title: "ACVE abre convocatoria para la cohorte de primavera",
|
||||
date: "15 de marzo de 2026",
|
||||
category: "Comunicado",
|
||||
excerpt: "Se habilitó la convocatoria para estudiantes y profesionales que buscan fortalecer inglés jurídico aplicado.",
|
||||
bodyPreview:
|
||||
"El proceso incluye evaluación de nivel, entrevista breve y acompañamiento para elegir la ruta formativa más adecuada según perfil profesional.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "news-2",
|
||||
title: "Nuevo ciclo de webinars con enfoque en redacción contractual",
|
||||
date: "08 de marzo de 2026",
|
||||
category: "Académico",
|
||||
excerpt: "Iniciamos una serie de sesiones en vivo para reforzar estructuras clave de contratos en inglés.",
|
||||
bodyPreview:
|
||||
"Cada webinar incluye ejemplos prácticos, análisis de cláusulas frecuentes y espacio de preguntas para conectar teoría con práctica legal real.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "news-3",
|
||||
title: "ACVE fortalece su red de mentores en litigio internacional",
|
||||
date: "02 de marzo de 2026",
|
||||
category: "Institucional",
|
||||
excerpt: "Se integran nuevos especialistas para acompañar el desarrollo profesional de la comunidad ACVE.",
|
||||
bodyPreview:
|
||||
"La red de mentores cubrirá preparación de audiencias, argumentación oral y terminología crítica para contextos transnacionales.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1560439514-4e9645039924?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "news-4",
|
||||
title: "Publicamos guía práctica para entrevistas legales en inglés",
|
||||
date: "22 de febrero de 2026",
|
||||
category: "Recursos",
|
||||
excerpt: "Disponible un nuevo material descargable para preparar entrevistas y reuniones con clientes internacionales.",
|
||||
bodyPreview:
|
||||
"La guía presenta frases útiles, recomendaciones de tono profesional y checklist de preparación para mejorar seguridad comunicativa.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
{
|
||||
id: "news-5",
|
||||
title: "Comunidad ACVE inicia calendario de foros colaborativos",
|
||||
date: "12 de febrero de 2026",
|
||||
category: "Comunidad",
|
||||
excerpt: "Los foros temáticos permitirán compartir casos, dudas y mejores prácticas entre cohortes.",
|
||||
bodyPreview:
|
||||
"Las dinámicas estarán moderadas por el equipo docente y buscarán acelerar el aprendizaje aplicado con interacción entre perfiles diversos.",
|
||||
thumbnail:
|
||||
"https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80",
|
||||
},
|
||||
];
|
||||
|
||||
export default function NoticiasPage() {
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel acve-section-base">
|
||||
<p className="acve-pill mb-4 w-fit">Noticias ACVE</p>
|
||||
<h1 className="acve-heading text-4xl md:text-5xl">Actualizaciones institucionales</h1>
|
||||
<p className="mt-3 max-w-3xl text-base text-muted-foreground md:text-lg">
|
||||
Formato tipo blog con tarjetas horizontales amplias, priorizando contenido textual y con miniaturas de apoyo.
|
||||
</p>
|
||||
|
||||
<div className="acve-scrollbar-none mt-8 max-h-[72vh] space-y-4 overflow-y-auto pr-1">
|
||||
{newsPosts.map((post) => (
|
||||
<article key={post.id} className="rounded-2xl border border-border/80 bg-card p-4 shadow-sm md:p-6">
|
||||
<div className="flex flex-col gap-4 md:flex-row">
|
||||
<div className="h-32 w-full shrink-0 overflow-hidden rounded-xl border border-border/70 md:h-24 md:w-56">
|
||||
<img alt={`Miniatura de ${post.title}`} className="h-full w-full object-cover" loading="lazy" src={post.thumbnail} />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-primary">
|
||||
{post.category} · {post.date}
|
||||
</p>
|
||||
<h2 className="mt-1 text-xl font-semibold text-foreground md:text-2xl">{post.title}</h2>
|
||||
<p className="mt-2 text-sm text-muted-foreground md:text-base">{post.excerpt}</p>
|
||||
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">{post.bodyPreview}</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Link className="acve-button-secondary mt-6 inline-flex px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/">
|
||||
Regresar al inicio
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,79 +1,297 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { db } from "@/lib/prisma";
|
||||
|
||||
const highlights = [
|
||||
"Courses designed for Latin American professionals",
|
||||
"Real English law case studies and analysis",
|
||||
"AI-powered legal assistant available 24/7",
|
||||
"Interactive practice exercises and assessments",
|
||||
type ProgramCard = {
|
||||
title: string;
|
||||
description: string;
|
||||
status: string;
|
||||
href: string;
|
||||
visualClass: string;
|
||||
};
|
||||
|
||||
const fallbackPrograms: ProgramCard[] = [
|
||||
{
|
||||
title: "Introducción al Inglés Legal",
|
||||
description:
|
||||
"Una introducción estructurada al lenguaje jurídico en inglés para comprender y utilizar terminología clave con seguridad profesional.",
|
||||
status: "Cohorte abierta",
|
||||
href: "/courses",
|
||||
visualClass: "from-[#ead9cb] via-[#f7ece3] to-[#fef8f2]",
|
||||
},
|
||||
{
|
||||
title: "Common vs Civil Law",
|
||||
description:
|
||||
"Explora los dos sistemas jurídicos predominantes del mundo y aprende su lógica, diferencias y vocabulario aplicado a contextos internacionales.",
|
||||
status: "Próximamente",
|
||||
href: "/courses",
|
||||
visualClass: "from-[#e4d4dd] via-[#f3e7ed] to-[#fff7fb]",
|
||||
},
|
||||
{
|
||||
title: "Fundamentos de la Traducción Jurídica",
|
||||
description:
|
||||
"Aprende los fundamentos de la equivalencia jurídica entre distintos sistemas legales para traducir con claridad, rigor y contexto.",
|
||||
status: "Próximamente",
|
||||
href: "/courses",
|
||||
visualClass: "from-[#e9ddd0] via-[#f7eee5] to-[#fefaf4]",
|
||||
},
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
const events = [
|
||||
{ title: "Networking virtual", date: "24", month: "MAR", mode: "Online", note: "Próximamente..." },
|
||||
{ title: "Webinar", date: "03", month: "ABR", mode: "Streaming", note: "Próximamente..." },
|
||||
{ title: "Sesión Q&A", date: "17", month: "ABR", mode: "En vivo", note: "Próximamente..." },
|
||||
{ title: "Taller presencial", date: "09", month: "MAY", mode: "Monterrey", note: "Próximamente..." },
|
||||
];
|
||||
|
||||
const caseStudies = [
|
||||
{
|
||||
title: "Miranda v. Arizona",
|
||||
year: "1966",
|
||||
summary:
|
||||
"Caso central en derecho penal del que surgen los Miranda rights. Ideal para trabajar vocabulario procesal, derechos constitucionales y lenguaje judicial.",
|
||||
},
|
||||
{
|
||||
title: "Marbury v. Madison",
|
||||
year: "1803",
|
||||
summary:
|
||||
"Caso fundacional que establece el judicial review en Estados Unidos y permite comprender cómo opera el control constitucional del poder público.",
|
||||
},
|
||||
{
|
||||
title: "Brown v. Board of Education",
|
||||
year: "1954",
|
||||
summary:
|
||||
"Decisión emblemática en materia de derechos civiles que declaró inconstitucional la segregación racial en escuelas públicas.",
|
||||
},
|
||||
];
|
||||
|
||||
const challenges = [
|
||||
{
|
||||
title: "Desafío de traducción",
|
||||
description: "Resuelve una traducción jurídica breve con foco en precisión terminológica y estilo profesional.",
|
||||
href: "/practice",
|
||||
},
|
||||
{
|
||||
title: "Reto de términos legales",
|
||||
description: "Pon a prueba tu dominio de conceptos clave con ejercicios de uso contextual y equivalencia funcional.",
|
||||
href: "/practice",
|
||||
},
|
||||
{
|
||||
title: "Ejercicio de cláusulas",
|
||||
description: "Analiza cláusulas reales y mejora tu capacidad de redacción y negociación en inglés jurídico.",
|
||||
href: "/practice",
|
||||
},
|
||||
];
|
||||
|
||||
const visualPresets = [
|
||||
"from-[#ead9cb] via-[#f7ece3] to-[#fef8f2]",
|
||||
"from-[#e4d4dd] via-[#f3e7ed] to-[#fff7fb]",
|
||||
"from-[#e9ddd0] via-[#f7eee5] to-[#fefaf4]",
|
||||
"from-[#dfe4f1] via-[#ecf0f7] to-[#f8f9fd]",
|
||||
"from-[#e7e1d6] via-[#f2ece4] to-[#fcfaf6]",
|
||||
];
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
async function getAcademicCards(): Promise<ProgramCard[]> {
|
||||
const publishedCourses = await db.course
|
||||
.findMany({
|
||||
where: { status: "PUBLISHED" },
|
||||
orderBy: { updatedAt: "desc" },
|
||||
take: 6,
|
||||
select: {
|
||||
slug: true,
|
||||
title: true,
|
||||
description: true,
|
||||
},
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to load featured courses for homepage.", error);
|
||||
return [];
|
||||
});
|
||||
|
||||
if (publishedCourses.length === 0) {
|
||||
return fallbackPrograms;
|
||||
}
|
||||
|
||||
return publishedCourses.map((course, index) => ({
|
||||
title: getText(course.title) || "Programa académico ACVE",
|
||||
description:
|
||||
getText(course.description) ||
|
||||
"Programa académico orientado al dominio del inglés jurídico con enfoque aplicado en contextos profesionales.",
|
||||
status: "Disponible",
|
||||
href: `/courses/${course.slug}`,
|
||||
visualClass: visualPresets[index % visualPresets.length],
|
||||
}));
|
||||
}
|
||||
|
||||
export default async function HomePage() {
|
||||
const programs = await getAcademicCards();
|
||||
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel relative overflow-hidden p-5 md:p-8">
|
||||
<div className="grid items-start gap-6 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
<div>
|
||||
<p className="acve-pill mb-4 w-fit text-sm">
|
||||
<span className="mr-2 text-accent">*</span>
|
||||
Professional Legal Education
|
||||
</p>
|
||||
<h1 className="acve-heading text-4xl leading-tight md:text-5xl">Learn English Law with Confidence</h1>
|
||||
<p className="mt-3 max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
|
||||
Courses, case studies, and guided practice designed for Latin American professionals and students.
|
||||
</p>
|
||||
<ul className="mt-5 grid gap-2 sm:grid-cols-2">
|
||||
{highlights.map((item) => (
|
||||
<li key={item} className="flex items-start gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
|
||||
<span className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full border border-accent text-xs text-accent">
|
||||
v
|
||||
</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<section className="acve-panel relative overflow-hidden px-6 py-10 md:px-10 md:py-14">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(152,20,63,0.18),_transparent_55%)]" />
|
||||
<div className="relative">
|
||||
<p className="acve-pill mb-5 w-fit text-sm">ACVE Centro de Estudios</p>
|
||||
<h1 className="acve-heading max-w-4xl text-4xl leading-tight md:text-6xl">
|
||||
Domina el inglés jurídico y ejerce a nivel internacional.
|
||||
</h1>
|
||||
<p className="mt-5 max-w-3xl text-base leading-relaxed text-muted-foreground md:text-lg">
|
||||
Formación práctica para comprender, redactar y negociar documentos legales en inglés. Diseñada para abogados y estudiantes que desean
|
||||
desenvolverse con solvencia en entornos académicos y profesionales globales.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-2">
|
||||
<Link className="acve-button-primary px-6 py-2 text-sm font-semibold transition hover:brightness-105" href="/courses">
|
||||
Start Learning
|
||||
</Link>
|
||||
<Link className="acve-button-secondary px-6 py-2 text-sm font-semibold transition hover:bg-brand-soft" href="/courses">
|
||||
Explore Courses
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mt-7 flex flex-wrap gap-3">
|
||||
<Link className="acve-button-primary inline-flex items-center px-6 py-3 text-sm font-semibold hover:brightness-105" href="/courses">
|
||||
Explorar programas
|
||||
</Link>
|
||||
<Link className="acve-button-secondary inline-flex items-center px-6 py-3 text-sm font-semibold hover:bg-accent" href="/case-studies">
|
||||
Ver casos prácticos
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="overflow-hidden rounded-3xl border border-slate-300 bg-white shadow-sm">
|
||||
<Image
|
||||
alt="ACVE legal library"
|
||||
className="h-[360px] w-full object-cover object-right md:h-[460px]"
|
||||
height={900}
|
||||
priority
|
||||
src="/images/hero-reference.png"
|
||||
width={700}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-4 left-4 right-4 rounded-2xl border border-slate-300 bg-white px-4 py-3 shadow-sm">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-accent">AI</p>
|
||||
<p className="text-lg font-semibold text-slate-800">Legal Assistant Ready</p>
|
||||
<p className="text-sm text-slate-500">Ask me anything about English Law</p>
|
||||
</div>
|
||||
<div className="mt-8 grid gap-3 md:grid-cols-3">
|
||||
{["Metodología aplicada", "Casos emblemáticos", "Comunidad jurídica"].map((item) => (
|
||||
<div key={item} className="rounded-2xl border border-border/80 bg-card/90 px-4 py-3 text-sm font-semibold text-foreground shadow-sm">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="mt-6 grid gap-3 border-t border-slate-200 pt-5 text-center text-xs font-semibold uppercase tracking-wide text-slate-500 md:grid-cols-3">
|
||||
<Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 hover:border-brand hover:text-brand" href="/courses">
|
||||
Browse courses
|
||||
</Link>
|
||||
<Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 hover:border-brand hover:text-brand" href="/case-studies">
|
||||
Read case studies
|
||||
</Link>
|
||||
<Link className="rounded-xl border border-slate-300 bg-white px-3 py-3 hover:border-brand hover:text-brand" href="/practice">
|
||||
Practice and exercises
|
||||
<section className="acve-panel px-6 py-8 md:px-10 md:py-10" id="formacion-academica">
|
||||
<div className="max-w-3xl">
|
||||
<h2 className="acve-heading text-3xl md:text-4xl">Formación Académica</h2>
|
||||
<p className="mt-3 text-muted-foreground md:text-lg">
|
||||
Programas impartidos por instructores de élite, con lecciones focalizadas y enfoque académico para una aplicación profesional real. Los
|
||||
cursos publicados aparecen automáticamente en esta sección.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
|
||||
{programs.map((program) => (
|
||||
<article key={program.title} className="rounded-2xl border border-border/80 bg-card p-4 shadow-sm">
|
||||
<div className={cn("h-36 rounded-xl border border-border/70 bg-gradient-to-br p-4", program.visualClass)}>
|
||||
<span className="inline-flex rounded-full border border-primary/20 bg-card/85 px-3 py-1 text-xs font-semibold text-primary">
|
||||
{program.status}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="mt-4 text-xl font-semibold text-foreground">{program.title}</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">{program.description}</p>
|
||||
<Link className="mt-4 inline-flex text-sm font-semibold text-primary hover:underline" href={program.href}>
|
||||
Conocer más
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="acve-panel px-6 py-8 md:px-10 md:py-10" id="eventos">
|
||||
<div className="max-w-3xl">
|
||||
<h2 className="acve-heading text-3xl md:text-4xl">Próximos eventos</h2>
|
||||
<p className="mt-3 text-muted-foreground md:text-lg">
|
||||
Espacios para practicar inglés legal, fortalecer comunidad y mantenerte actualizado en tendencias jurídicas internacionales.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-7 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
{events.map((event) => (
|
||||
<article key={event.title} className="rounded-2xl border border-border/80 bg-card p-4 shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-xl border border-primary/20 bg-primary/10 px-2 py-2 text-center text-primary">
|
||||
<p className="text-lg font-bold leading-none">{event.date}</p>
|
||||
<p className="text-[11px] font-semibold tracking-wide">{event.month}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-foreground">{event.title}</h3>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">{event.mode}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 text-sm text-muted-foreground">{event.note}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<Link className="acve-button-secondary inline-flex items-center px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/eventos">
|
||||
Ver el calendario completo
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="acve-panel px-6 py-8 md:px-10 md:py-10">
|
||||
<div className="max-w-4xl">
|
||||
<h2 className="acve-heading text-3xl md:text-4xl">Casos prácticos</h2>
|
||||
<p className="mt-3 text-muted-foreground md:text-lg">
|
||||
Pon a prueba tu nivel de inglés legal con los casos judiciales más emblemáticos de Estados Unidos y del mundo.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
|
||||
{caseStudies.map((entry) => (
|
||||
<article key={entry.title} className="rounded-2xl border border-border/80 bg-card p-5 shadow-sm">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-primary">{entry.year}</p>
|
||||
<h3 className="mt-1 text-xl font-semibold text-foreground">{entry.title}</h3>
|
||||
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">{entry.summary}</p>
|
||||
<Link className="mt-4 inline-flex text-sm font-semibold text-primary hover:underline" href="/case-studies">
|
||||
Read more
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative overflow-hidden rounded-3xl border border-primary/30 bg-gradient-to-r from-[#98143f] via-[#6f1737] to-[#3f1327] px-7 py-10 text-white shadow-xl md:px-10 md:py-12">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_30%,_rgba(255,255,255,0.24),_transparent_40%)]" />
|
||||
<div className="relative max-w-3xl">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-white/80">Evento destacado</p>
|
||||
<h2 className="mt-3 font-[var(--acve-heading-font)] text-3xl leading-tight md:text-4xl">Congreso Internacional de Inglés Jurídico ACVE 2026</h2>
|
||||
<p className="mt-4 text-sm leading-relaxed text-white/90 md:text-base">
|
||||
Una jornada intensiva con expertos en litigio, arbitraje y traducción jurídica para fortalecer tus competencias profesionales en contextos
|
||||
multinacionales.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<Link className="inline-flex rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-[#6f1737] hover:bg-white/90" href="/auth/signup">
|
||||
Reservar lugar
|
||||
</Link>
|
||||
<Link className="inline-flex rounded-full border border-white/50 px-5 py-2.5 text-sm font-semibold text-white hover:bg-white/10" href="/eventos">
|
||||
Ver agenda preliminar
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="acve-panel px-6 py-8 md:px-10 md:py-10">
|
||||
<div className="max-w-3xl">
|
||||
<h2 className="acve-heading text-3xl md:text-4xl">Retos</h2>
|
||||
<p className="mt-3 text-muted-foreground md:text-lg">
|
||||
Entrena tu precisión lingüística con ejercicios breves diseñados para el trabajo real de abogados y equipos legales bilingües.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-7 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{challenges.map((challenge) => (
|
||||
<article key={challenge.title} className="rounded-2xl border border-border/80 bg-card p-5 shadow-sm">
|
||||
<h3 className="text-xl font-semibold text-foreground">{challenge.title}</h3>
|
||||
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">{challenge.description}</p>
|
||||
<Link className="acve-button-primary mt-5 inline-flex items-center px-5 py-2.5 text-sm font-semibold hover:brightness-105" href={challenge.href}>
|
||||
Iniciar
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
28
app/(public)/sobre-acve/page.tsx
Normal file
28
app/(public)/sobre-acve/page.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function SobreAcvePage() {
|
||||
return (
|
||||
<div className="acve-page">
|
||||
<section className="acve-panel acve-section-base">
|
||||
<p className="acve-pill mb-4 w-fit">Sobre ACVE</p>
|
||||
<h1 className="acve-heading text-4xl md:text-5xl">Nuestra historia</h1>
|
||||
<p className="mt-3 max-w-3xl text-base text-muted-foreground md:text-lg">
|
||||
ACVE nació en Monterrey como una iniciativa de cinco fundadores con una misma convicción: que dominar el inglés jurídico abre puertas
|
||||
académicas y profesionales a nivel internacional.
|
||||
</p>
|
||||
<p className="mt-2 max-w-3xl text-base text-muted-foreground md:text-lg">
|
||||
Empezamos con grupos pequeños, sesiones prácticas y acompañamiento cercano para abogados y estudiantes. Con el tiempo, ese formato se
|
||||
convirtió en una comunidad enfocada en claridad técnica, confianza comunicativa y aplicación real en contextos legales.
|
||||
</p>
|
||||
<p className="mt-2 max-w-3xl text-base text-muted-foreground md:text-lg">
|
||||
Hoy seguimos creciendo con el mismo enfoque de origen: formación seria, metodología aplicada y una red que impulse a cada alumno a ejercer
|
||||
con mayor seguridad en escenarios globales.
|
||||
</p>
|
||||
<p className="mt-5 text-sm font-semibold text-primary">Origen: Monterrey · Equipo fundador: 5 personas</p>
|
||||
<Link className="acve-button-secondary mt-6 inline-flex px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/">
|
||||
Regresar al inicio
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
app/api/auth/session/route.ts
Normal file
38
app/api/auth/session/route.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { UserRole } from "@prisma/client";
|
||||
import { supabaseServer } from "@/lib/supabase/server";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const supabase = await supabaseServer();
|
||||
if (!supabase) {
|
||||
return NextResponse.json({ user: null, isTeacher: false });
|
||||
}
|
||||
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser();
|
||||
|
||||
if (!user) {
|
||||
return NextResponse.json({ user: null, isTeacher: false });
|
||||
}
|
||||
|
||||
const profile = await db.profile.findUnique({
|
||||
where: { id: user.id },
|
||||
select: { role: true },
|
||||
}).catch(() => null);
|
||||
|
||||
const isTeacher =
|
||||
!!profile &&
|
||||
(profile.role === UserRole.TEACHER || profile.role === UserRole.SUPER_ADMIN);
|
||||
|
||||
return NextResponse.json({
|
||||
user: { id: user.id, email: user.email ?? null },
|
||||
isTeacher,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to resolve auth session route. Returning anonymous fallback.", error);
|
||||
return NextResponse.json({ user: null, isTeacher: false });
|
||||
}
|
||||
}
|
||||
69
app/api/certificates/[id]/pdf/route.ts
Normal file
69
app/api/certificates/[id]/pdf/route.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { requireUser } from "@/lib/auth/requireUser";
|
||||
import { db } from "@/lib/prisma";
|
||||
import { buildCertificatePdf } from "@/lib/certificates";
|
||||
|
||||
function getText(value: unknown): string {
|
||||
if (!value) return "";
|
||||
if (typeof value === "string") return value;
|
||||
if (typeof value === "object") {
|
||||
const record = value as Record<string, unknown>;
|
||||
if (typeof record.en === "string") return record.en;
|
||||
if (typeof record.es === "string") return record.es;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
type Params = {
|
||||
params: Promise<{ id: string }>;
|
||||
};
|
||||
|
||||
export async function GET(_: Request, { params }: Params) {
|
||||
try {
|
||||
const user = await requireUser();
|
||||
if (!user?.id) {
|
||||
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
}
|
||||
|
||||
const { id } = await params;
|
||||
const certificate = await db.certificate.findUnique({
|
||||
where: { id },
|
||||
include: {
|
||||
course: {
|
||||
select: {
|
||||
title: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!certificate || certificate.userId !== user.id) {
|
||||
return NextResponse.json({ error: "Not found" }, { status: 404 });
|
||||
}
|
||||
const certificateNumber =
|
||||
(certificate as Record<string, unknown>).certificateNumber ??
|
||||
(certificate.metadataSnapshot as Record<string, unknown> | null)?.certificateNumber ??
|
||||
`ACVE-${certificate.id.slice(0, 8)}`;
|
||||
|
||||
const pdf = buildCertificatePdf({
|
||||
certificateNumber: String(certificateNumber),
|
||||
learnerName: user.fullName || user.email || "Learner",
|
||||
learnerEmail: user.email,
|
||||
courseTitle: getText(certificate.course.title) || "Untitled course",
|
||||
issuedAt: certificate.issuedAt,
|
||||
});
|
||||
|
||||
return new Response(Buffer.from(pdf), {
|
||||
headers: {
|
||||
"Content-Type": "application/pdf",
|
||||
"Content-Disposition": `attachment; filename="certificate-${String(certificateNumber)}.pdf"`,
|
||||
"Cache-Control": "private, no-store",
|
||||
},
|
||||
});
|
||||
} catch {
|
||||
return NextResponse.json(
|
||||
{ error: "Certificate service is not available until latest migrations are applied." },
|
||||
{ status: 503 },
|
||||
);
|
||||
}
|
||||
}
|
||||
175
app/globals.css
175
app/globals.css
@@ -5,9 +5,15 @@
|
||||
:root {
|
||||
/* ACVE core variables */
|
||||
--acve-brand: #98143f;
|
||||
--acve-ink: #253247;
|
||||
--acve-line: #d8dce3;
|
||||
--acve-panel: #ffffff;
|
||||
--acve-brand-strong: #7c1033;
|
||||
--acve-brand-soft: #f7e8eb;
|
||||
--acve-ink: #2f2931;
|
||||
--acve-muted: #655e66;
|
||||
--acve-line: #d8cec2;
|
||||
--acve-panel: #fffaf3;
|
||||
--acve-panel-strong: #fffdf9;
|
||||
--acve-shell-bg: linear-gradient(180deg, #faf4ea 0%, #f4ebde 100%);
|
||||
--acve-body-bg: radial-gradient(circle at top right, #fff8ef 0%, #f8efe3 52%, #f2e7d9 100%);
|
||||
--acve-heading-font: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
|
||||
--acve-body-font: "Segoe UI", "Trebuchet MS", "Verdana", sans-serif;
|
||||
--acve-space-1: 4px;
|
||||
@@ -18,53 +24,81 @@
|
||||
--acve-space-6: 32px;
|
||||
--acve-space-7: 48px;
|
||||
|
||||
/* SHADCN MAPPING */
|
||||
--background: 0 0% 98%;
|
||||
/* Matches your #f5f5f7 approx */
|
||||
--foreground: 220 24% 20%;
|
||||
/* Matches your --acve-ink */
|
||||
|
||||
/* SHADCN mapping */
|
||||
--background: 36 45% 95%;
|
||||
--foreground: 330 10% 18%;
|
||||
--primary: 341 77% 34%;
|
||||
/* Your Burgundy #98143f */
|
||||
--primary-foreground: 0 0% 100%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 220 24% 20%;
|
||||
|
||||
--border: 223 18% 87%;
|
||||
/* Matches your --acve-line */
|
||||
--input: 223 18% 87%;
|
||||
--card: 34 55% 98%;
|
||||
--card-foreground: 330 10% 18%;
|
||||
--border: 32 26% 80%;
|
||||
--input: 32 26% 80%;
|
||||
--ring: 341 77% 34%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 28 37% 90%;
|
||||
--secondary-foreground: 330 10% 20%;
|
||||
--muted: 30 28% 90%;
|
||||
--muted-foreground: 329 8% 41%;
|
||||
--accent: 345 53% 94%;
|
||||
--accent-foreground: 339 51% 24%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--popover: 34 55% 98%;
|
||||
--popover-foreground: 330 10% 18%;
|
||||
--radius: 0.95rem;
|
||||
}
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
.dark {
|
||||
--acve-brand: #bf4069;
|
||||
--acve-brand-strong: #c95a7f;
|
||||
--acve-brand-soft: #3c1f2d;
|
||||
--acve-ink: #ede6e0;
|
||||
--acve-muted: #b5aeb6;
|
||||
--acve-line: #353847;
|
||||
--acve-panel: #171c27;
|
||||
--acve-panel-strong: #1b2130;
|
||||
--acve-shell-bg: linear-gradient(180deg, #121621 0%, #0f1420 100%);
|
||||
--acve-body-bg: radial-gradient(circle at top right, #1f2433 0%, #151a26 54%, #0f131e 100%);
|
||||
|
||||
--radius: 0.75rem;
|
||||
/* 12px to match your primary button */
|
||||
--background: 222 30% 11%;
|
||||
--foreground: 30 25% 92%;
|
||||
--primary: 338 53% 51%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--card: 224 26% 15%;
|
||||
--card-foreground: 30 25% 92%;
|
||||
--border: 225 17% 27%;
|
||||
--input: 225 17% 27%;
|
||||
--ring: 338 53% 51%;
|
||||
--secondary: 224 20% 20%;
|
||||
--secondary-foreground: 30 25% 92%;
|
||||
--muted: 224 20% 19%;
|
||||
--muted-foreground: 225 14% 71%;
|
||||
--accent: 336 27% 24%;
|
||||
--accent-foreground: 30 25% 92%;
|
||||
--destructive: 0 63% 38%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--popover: 224 26% 15%;
|
||||
--popover-foreground: 30 25% 92%;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
background: radial-gradient(circle at top right, #fcfcfd 0%, #f5f5f7 55%, #f0f0f2 100%);
|
||||
color: var(--acve-ink);
|
||||
background: var(--acve-body-bg);
|
||||
color: hsl(var(--foreground));
|
||||
font-family: var(--acve-body-font);
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
text-rendering: geometricPrecision;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -99,12 +133,17 @@ h4 {
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #f2d6df;
|
||||
color: #421020;
|
||||
background: #f1d9e1;
|
||||
color: #3f1020;
|
||||
}
|
||||
|
||||
.dark ::selection {
|
||||
background: #5d2e41;
|
||||
color: #fff6fa;
|
||||
}
|
||||
|
||||
.acve-shell {
|
||||
background: linear-gradient(180deg, #f7f7f8 0%, #f2f3f5 100%);
|
||||
background: var(--acve-shell-bg);
|
||||
}
|
||||
|
||||
.acve-panel {
|
||||
@@ -125,8 +164,8 @@ h4 {
|
||||
align-items: center;
|
||||
border: 1px solid var(--acve-line);
|
||||
border-radius: 9999px;
|
||||
background: #fafafa;
|
||||
color: #384253;
|
||||
background: var(--acve-panel-strong);
|
||||
color: var(--acve-muted);
|
||||
padding: 8px 14px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
@@ -142,7 +181,7 @@ h4 {
|
||||
.acve-button-secondary {
|
||||
border: 1px solid var(--acve-brand);
|
||||
color: var(--acve-brand);
|
||||
background: #ffffff;
|
||||
background: var(--acve-panel-strong);
|
||||
border-radius: 12px;
|
||||
min-height: 44px;
|
||||
}
|
||||
@@ -161,8 +200,66 @@ h4 {
|
||||
padding: var(--acve-space-5);
|
||||
}
|
||||
|
||||
.acve-scrollbar-none {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.acve-scrollbar-none::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.acve-page {
|
||||
gap: var(--acve-space-6);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark-mode compatibility layer for legacy light-only utility classes */
|
||||
.dark .bg-white,
|
||||
.dark .bg-white\/70,
|
||||
.dark .bg-white\/80,
|
||||
.dark .bg-white\/90,
|
||||
.dark .bg-\[\#faf8f8\],
|
||||
.dark .bg-\[\#f6f6f8\] {
|
||||
background-color: hsl(var(--card)) !important;
|
||||
}
|
||||
|
||||
.dark .bg-slate-50,
|
||||
.dark .bg-slate-50\/40,
|
||||
.dark .bg-slate-50\/50,
|
||||
.dark .bg-slate-50\/80,
|
||||
.dark .bg-slate-100,
|
||||
.dark .bg-slate-200 {
|
||||
background-color: hsl(var(--muted)) !important;
|
||||
}
|
||||
|
||||
.dark .border-slate-100,
|
||||
.dark .border-slate-200,
|
||||
.dark .border-slate-300,
|
||||
.dark .border-slate-400,
|
||||
.dark .border-gray-200 {
|
||||
border-color: hsl(var(--border)) !important;
|
||||
}
|
||||
|
||||
.dark .text-black,
|
||||
.dark .text-slate-900,
|
||||
.dark .text-slate-800,
|
||||
.dark .text-slate-700 {
|
||||
color: hsl(var(--foreground)) !important;
|
||||
}
|
||||
|
||||
.dark .text-slate-600,
|
||||
.dark .text-slate-500,
|
||||
.dark .text-slate-400 {
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
}
|
||||
|
||||
.dark [class*="text-[#1"],
|
||||
.dark [class*="text-[#2"],
|
||||
.dark [class*="text-[#3"],
|
||||
.dark [class*="text-[#0"] {
|
||||
color: hsl(var(--foreground)) !important;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,8 @@ import "./globals.css";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Footer from "@/components/Footer";
|
||||
import AssistantDrawer from "@/components/AssistantDrawer";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "ACVE",
|
||||
@@ -11,14 +13,17 @@ export const metadata: Metadata = {
|
||||
|
||||
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="es" suppressHydrationWarning>
|
||||
<body>
|
||||
<div className="acve-shell flex min-h-screen flex-col">
|
||||
<Navbar />
|
||||
<main className="mx-auto w-full max-w-[1200px] flex-1 px-4 py-5 md:px-5 md:py-7">{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
<AssistantDrawer />
|
||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
|
||||
<div className="acve-shell flex min-h-screen flex-col">
|
||||
<Navbar />
|
||||
<main className="mx-auto w-full max-w-[1240px] flex-1 px-4 py-6 md:px-6 md:py-8">{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
<Toaster />
|
||||
<AssistantDrawer />
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user