feat: Puente Mayúscula-Minúscula + TTS SpeechSynthesis + E2E fixes

2026-07-21 15:31:46 -03:00
commit fa8e0c58ce
120 changed files with 16013 additions and 0 deletions
@@ -0,0 +1,68 @@
+"use client"
+
+const errorLabels: Record<string, string> = {
+  "discriminacion-auditiva": "Discriminación auditiva",
+  "confusion-letra": "Confusión de letra",
+  "silaba-dificil": "Sílaba difícil",
+  "omision-letra": "Omisión de letra",
+  "inversion-letra": "Inversión de letra",
+}
+
+const errorColors: Record<string, string> = {
+  "discriminacion-auditiva": "bg-blue-200 text-blue-800",
+  "confusion-letra": "bg-red-200 text-red-800",
+  "silaba-dificil": "bg-yellow-200 text-yellow-800",
+  "omision-letra": "bg-purple-200 text-purple-800",
+  "inversion-letra": "bg-orange-200 text-orange-800",
+}
+
+interface Props {
+  data: Record<string, number>
+  total: number
+}
+
+export default function ErrorPatternsChart({ data, total }: Props) {
+  const entries = Object.entries(data)
+
+  if (total === 0) {
+    return (
+      <p className="text-sm text-muted-foreground text-center py-4">
+        Sin errores registrados. ¡Bien ahí!
+      </p>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      {entries.map(([key, count]) => {
+        const pct = Math.round((count / total) * 100)
+        return (
+          <div key={key}>
+            <div className="flex justify-between text-sm mb-1">
+              <span className="font-medium">{errorLabels[key] || key}</span>
+              <span className="text-muted-foreground">
+                {count} ({pct}%)
+              </span>
+            </div>
+            <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
+              <div
+                className={`h-full rounded-full transition-all ${
+                  key === "discriminacion-auditiva"
+                    ? "bg-blue-400"
+                    : key === "confusion-letra"
+                      ? "bg-red-400"
+                      : key === "silaba-dificil"
+                        ? "bg-yellow-400"
+                        : key === "omision-letra"
+                          ? "bg-purple-400"
+                          : "bg-orange-400"
+                }`}
+                style={{ width: `${pct}%` }}
+              />
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}