initial push

2026-03-15 15:03:56 +01:00
parent d48b9d5352
commit 65aaf9275e
146 changed files with 70245 additions and 100 deletions
--- a/src/components/app/dashboard-view.tsx
+++ b/src/components/app/dashboard-view.tsx
@@ -0,0 +1,86 @@
+"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>
+          ),
+        },
+      ]}
+    />
+  );
+}