Merge pull request 'fix/Incidencias' (#46) from fix/Incidencias into main

Reviewed-on: #46

src/components/asignaturas/detalle/MateriaDetailPage.tsx

@@ -62,16 +62,33 @@ function EditableHeaderField({
 }) {
   const textValue = String(value)
 
+  // Manejador para cuando el usuario termina de editar (pierde el foco)
+  const handleBlur = (e: React.FocusEvent<HTMLSpanElement>) => {
+    const newValue = e.currentTarget.innerText
+    if (newValue !== textValue) {
+      onSave(newValue)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      e.currentTarget.blur() // Forzamos el guardado al presionar Enter
+    }
+  }
+
   return (
-    <input
-      type="text"
-      value={textValue}
-      // El truco es usar el atributo "size" o calcular el ancho dinámicamente
-      style={{ width: `${Math.max(textValue.length, 1)}ch` }}
-      onChange={(e) => onSave(e.target.value)}
-      onBlur={(e) => onSave(e.target.value)}
-      className={`border-none bg-transparent outline-none focus:ring-2 focus:ring-blue-400 ${className ?? ''}`}
-    />
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <span
+      contentEditable
+      suppressContentEditableWarning={true} // Evita el warning de React por tener hijos y contentEditable
+      spellCheck={false}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      className={`inline-block cursor-text rounded-sm px-1 transition-all hover:bg-white/10 focus:bg-white/20 focus:ring-2 focus:ring-blue-400/50 focus:outline-none ${className ?? ''} `}
+    >
+      {textValue}
+    </span>
   )
 }
 

src/routes/planes/$planId/_detalle/flujo.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { CheckCircle2, Circle, Clock } from 'lucide-react'
+import { CheckCircle2, Clock } from 'lucide-react'
+
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -74,7 +75,7 @@ function RouteComponent() {
               </div>
               <div className="mt-2 w-px flex-1 bg-slate-200" />
             </div>
-            <Card className="flex-1 border-blue-500 bg-blue-50/10">
+            {/* <Card className="flex-1 border-blue-500 bg-blue-50/10">
               <CardHeader className="flex flex-row items-center justify-between py-3">
                 <div>
                   <CardTitle className="text-lg text-blue-700">
@@ -97,11 +98,11 @@ function RouteComponent() {
                   <li>Mapa curricular aprobado preliminarmente</li>
                 </ul>
               </CardContent>
-            </Card>
+            </Card> */}
           </div>
 
           {/* Estado: Pendiente */}
-          <div className="relative flex gap-4 pb-4">
+          {/* <div className="relative flex gap-4 pb-4">
             <div className="flex flex-col items-center">
               <div className="rounded-full bg-slate-100 p-1 text-slate-400">
                 <Circle className="h-6 w-6" />
@@ -113,7 +114,7 @@ function RouteComponent() {
                 <Badge variant="outline">Pendiente</Badge>
               </CardHeader>
             </Card>
-          </div>
+          </div> */}
         </div>
 
         {/* LADO DERECHO: Formulario de Transición */}
@@ -145,7 +146,7 @@ function RouteComponent() {
                 />
               </div>
 
-              <Button className="w-full bg-teal-600 hover:bg-teal-700">
+              <Button className="w-full bg-teal-600 hover:bg-teal-700" disabled>
                 Avanzar a Revisión Expertos
               </Button>
             </CardContent>