80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
import Link from "next/link";
|
|
import { ModuleCard } from "@/components/app/module-card";
|
|
import { PageShell } from "@/components/app/page-shell";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
|
import { requireOnboardedUser } from "@/lib/auth/user";
|
|
import { getDiagnosticOverview } from "@/lib/diagnostic";
|
|
|
|
export default async function DiagnosticPage() {
|
|
const user = await requireOnboardedUser();
|
|
const overview = await getDiagnosticOverview(user.id);
|
|
|
|
return (
|
|
<PageShell
|
|
title="Diagnostico"
|
|
description="Selecciona un modulo para iniciar o reanudar el cuestionario."
|
|
action={
|
|
overview.resumeHref ? (
|
|
<Link href={overview.resumeHref}>
|
|
<Button>Continuar ultimo modulo</Button>
|
|
</Link>
|
|
) : undefined
|
|
}
|
|
>
|
|
<Card>
|
|
<CardHeader>
|
|
<h2 className="text-lg font-semibold text-[#1f2a40]">Estado general</h2>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-3 sm:grid-cols-4">
|
|
<div className="rounded-xl bg-[#edf2fa] p-4">
|
|
<p className="text-xs font-semibold uppercase text-[#5f6d86]">Modulos</p>
|
|
<p className="mt-1 text-2xl font-bold text-[#1e2b45]">{overview.stats.modules}</p>
|
|
</div>
|
|
<div className="rounded-xl bg-[#edf2fa] p-4">
|
|
<p className="text-xs font-semibold uppercase text-[#5f6d86]">Completados</p>
|
|
<p className="mt-1 text-2xl font-bold text-[#1e2b45]">{overview.stats.completedModules}</p>
|
|
</div>
|
|
<div className="rounded-xl bg-[#edf2fa] p-4">
|
|
<p className="text-xs font-semibold uppercase text-[#5f6d86]">Progreso total</p>
|
|
<p className="mt-1 text-2xl font-bold text-[#1e2b45]">{overview.stats.overallCompletion}%</p>
|
|
</div>
|
|
<div className="rounded-xl bg-[#edf2fa] p-4">
|
|
<p className="text-xs font-semibold uppercase text-[#5f6d86]">Respuestas</p>
|
|
<p className="mt-1 text-2xl font-bold text-[#1e2b45]">
|
|
{overview.stats.answeredQuestions}/{overview.stats.totalQuestions}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{overview.modules.length === 0 ? (
|
|
<Card>
|
|
<CardHeader>
|
|
<h3 className="text-base font-semibold text-[#22314b]">No hay modulos configurados</h3>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-[#64718a]">
|
|
Ejecuta el seed de base de datos para cargar modulos, preguntas y opciones antes de iniciar el diagnostico.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{overview.modules.map((module) => (
|
|
<ModuleCard
|
|
key={module.key}
|
|
name={module.name}
|
|
completion={module.completion}
|
|
status={module.status}
|
|
href={`/diagnostic/${module.key}?q=${module.resumeQuestionIndex}`}
|
|
answeredQuestions={module.answeredQuestions}
|
|
totalQuestions={module.totalQuestions}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</PageShell>
|
|
);
|
|
}
|