87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { Tabs } from "@/components/ui/tabs";
|
|
import type { ModuleScoreSummary } from "@/lib/scoring";
|
|
|
|
type DashboardViewProps = {
|
|
moduleScores: ModuleScoreSummary[];
|
|
};
|
|
|
|
const ModuleBarsCard = dynamic(
|
|
() => import("@/components/app/module-bars-card").then((module) => module.ModuleBarsCard),
|
|
{ ssr: false, loading: () => <div className="h-72 rounded-2xl border border-[#dde4f0] bg-white" /> },
|
|
);
|
|
|
|
const RadarChartCard = dynamic(
|
|
() => import("@/components/app/radar-chart-card").then((module) => module.RadarChartCard),
|
|
{ ssr: false, loading: () => <div className="h-72 rounded-2xl border border-[#dde4f0] bg-white" /> },
|
|
);
|
|
|
|
export function DashboardView({ moduleScores }: DashboardViewProps) {
|
|
const barData = moduleScores.map((moduleScore) => ({
|
|
name: moduleScore.moduleName,
|
|
value: Math.round(moduleScore.score),
|
|
}));
|
|
|
|
const radarData = moduleScores.map((moduleScore) => ({
|
|
module: moduleScore.moduleName,
|
|
score: Math.round(moduleScore.score),
|
|
}));
|
|
|
|
return (
|
|
<Tabs
|
|
items={[
|
|
{
|
|
id: "overview",
|
|
label: "Overview",
|
|
content: (
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<ModuleBarsCard data={barData} />
|
|
<RadarChartCard data={radarData} />
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "modules",
|
|
label: "Modules",
|
|
content: (
|
|
<Card>
|
|
<CardHeader>
|
|
<h3 className="text-base font-semibold text-[#22314b]">Estado por modulo</h3>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{moduleScores.map((moduleScore) => (
|
|
<div key={moduleScore.moduleId} className="rounded-lg border border-[#e3eaf5] p-3">
|
|
<div className="mb-2 flex flex-wrap items-center justify-between gap-2">
|
|
<p className="text-sm font-semibold text-[#32425d]">{moduleScore.moduleName}</p>
|
|
<Badge variant={moduleScore.status === "Completado" ? "success" : moduleScore.status === "En curso" ? "warning" : "neutral"}>
|
|
{moduleScore.status}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="mb-1 flex items-center justify-between text-xs font-semibold text-[#5f6d86]">
|
|
<span>Score</span>
|
|
<span>{Math.round(moduleScore.score)}%</span>
|
|
</div>
|
|
<Progress value={moduleScore.score} />
|
|
|
|
<div className="mt-3 mb-1 flex items-center justify-between text-xs font-semibold text-[#5f6d86]">
|
|
<span>Avance</span>
|
|
<span>{Math.round(moduleScore.completion)}%</span>
|
|
</div>
|
|
<Progress value={moduleScore.completion} />
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
}
|