Actualizar esta sección de seriación fix #195

Reviewed-on: #199

src/components/asignaturas/detalle/AsignaturaDetailPage.tsx

@@ -7,6 +7,13 @@ import type { AsignaturaDetail } from '@/data'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 import {
   Tooltip,
@@ -14,6 +21,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import { usePlanAsignaturas } from '@/data'
 import { useSubject, useUpdateAsignatura } from '@/data/hooks/useSubjects'
 
 export interface BibliografiaEntry {
@@ -59,8 +67,12 @@ export default function AsignaturaDetailPage() {
   const { asignaturaId } = useParams({
     from: '/planes/$planId/asignaturas/$asignaturaId',
   })
+  const { planId } = useParams({
+    from: '/planes/$planId/asignaturas/$asignaturaId',
+  })
   const { data: asignaturaApi } = useSubject(asignaturaId)
-
+  const { data: asignaturasApi, isLoading: loadingAsig } =
+    usePlanAsignaturas(planId)
   const [asignatura, setAsignatura] = useState<AsignaturaDetail | null>(null)
   const updateAsignatura = useUpdateAsignatura()
 
@@ -81,16 +93,54 @@ export default function AsignaturaDetailPage() {
       },
     })
   }
+
+  const asignaturaSeriada = useMemo(() => {
+    if (!asignaturaApi?.prerrequisito_asignatura_id || !asignaturasApi)
+      return null
+    return asignaturasApi.find(
+      (asig) => asig.id === asignaturaApi.prerrequisito_asignatura_id,
+    )
+  }, [asignaturaApi, asignaturasApi])
+  const requisitosFormateados = useMemo(() => {
+    if (!asignaturaSeriada) return []
+    return [
+      {
+        type: 'Pre-requisito',
+        code: asignaturaSeriada.codigo,
+        name: asignaturaSeriada.nombre,
+        id: asignaturaSeriada.id, // Guardamos el ID para el select
+      },
+    ]
+  }, [asignaturaSeriada])
+
+  const handleUpdatePrerrequisito = (newId: string | null) => {
+    updateAsignatura.mutate({
+      asignaturaId,
+      patch: {
+        prerrequisito_asignatura_id: newId,
+      },
+    })
+  }
   /* ---------- sincronizar API ---------- */
   useEffect(() => {
-    if (asignaturaApi) setAsignatura(asignaturaApi)
-  }, [asignaturaApi])
+    console.log(requisitosFormateados)
 
-  return <DatosGenerales onPersistDato={handlePersistDatoGeneral} />
+    if (asignaturaApi) setAsignatura(asignaturaApi)
+  }, [asignaturaApi, requisitosFormateados])
+
+  return (
+    <DatosGenerales
+      pre={requisitosFormateados}
+      availableSubjects={asignaturasApi}
+      onPersistDato={handlePersistDatoGeneral}
+    />
+  )
 }
 
 function DatosGenerales({
   onPersistDato,
+  pre,
+  availableSubjects,
 }: {
   onPersistDato: (clave: string, value: string) => void
 }) {
@@ -265,18 +315,19 @@ function DatosGenerales({
             <InfoCard
               title="Requisitos y Seriación"
               type="requirements"
-              initialContent={[
-                {
-                  type: 'Pre-requisito',
-                  code: 'PA-301',
-                  name: 'Programación Avanzada',
-                },
-                {
-                  type: 'Co-requisito',
-                  code: 'MAT-201',
-                  name: 'Matemáticas Discretas',
-                },
-              ]}
+              initialContent={pre}
+              // Pasamos las materias del plan para el Select (excluyendo la actual)
+              availableSubjects={
+                availableSubjects?.filter((a) => a.id !== asignaturaId) || []
+              }
+              onPersist={({ value }) => {
+                updateAsignatura.mutate({
+                  asignaturaId,
+                  patch: {
+                    prerrequisito_asignatura_id: value, // value ya viene como ID o null desde handleSave
+                  },
+                })
+              }}
             />
 
             {/* Tarjeta de Evaluación */}
@@ -316,6 +367,7 @@ interface InfoCardProps {
   containerRef?: React.RefObject<HTMLDivElement | null>
   forceEditToken?: number
   highlightToken?: number
+  availableSubjects?: any
 }
 
 function InfoCard({
@@ -332,6 +384,7 @@ function InfoCard({
   containerRef,
   forceEditToken,
   highlightToken,
+  availableSubjects,
 }: InfoCardProps) {
   const [isEditing, setIsEditing] = useState(false)
   const [isHighlighted, setIsHighlighted] = useState(false)
@@ -349,7 +402,8 @@ function InfoCard({
   useEffect(() => {
     setData(initialContent)
     setTempText(initialContent)
-
+    console.log(data)
+    console.log(initialContent)
     if (type === 'evaluation') {
       const raw = Array.isArray(initialContent) ? initialContent : []
       const rows: Array<CriterioEvaluacionRowDraft> = raw
@@ -392,6 +446,8 @@ function InfoCard({
 
   const handleSave = () => {
     console.log('clave, valor:', clave, String(tempText ?? ''))
+    console.log(clave)
+    console.log(tempText)
 
     if (type === 'evaluation') {
       const cleaned: Array<CriterioEvaluacionRow> = []
@@ -422,6 +478,25 @@ function InfoCard({
       void onPersist?.({ type, clave, value: cleaned })
       return
     }
+    if (type === 'requirements') {
+      console.log('entre aqui ')
+
+      // Si tempText es un array y tiene elementos, tomamos el ID del primero
+      // Si es "none" o está vacío, mandamos null (para limpiar la seriación)
+      const prerequisiteId =
+        Array.isArray(tempText) && tempText.length > 0 ? tempText[0].id : null
+
+      setData(tempText) // Actualiza la vista local
+      setIsEditing(false)
+
+      // Mandamos el ID específico a la base de datos
+      void onPersist?.({
+        type,
+        clave: 'prerrequisito_asignatura_id', // Forzamos la columna correcta
+        value: prerequisiteId,
+      })
+      return
+    }
 
     setData(tempText)
     setIsEditing(false)
@@ -541,7 +616,52 @@ function InfoCard({
         <CardContent className="pt-4">
           {isEditing ? (
             <div className="space-y-3">
-              {type === 'evaluation' ? (
+              {/* Condicionales de edición según el tipo */}
+              {type === 'requirements' ? (
+                <div className="space-y-3">
+                  <label className="text-xs font-medium text-slate-500">
+                    Materia de Seriación
+                  </label>
+                  <Select
+                    value={tempText?.[0]?.id || 'none'}
+                    onValueChange={(val) => {
+                      const selected = availableSubjects?.find(
+                        (s) => s.id === val,
+                      )
+                      if (val === 'none' || !selected) {
+                        console.log('guardando')
+
+                        setTempText([])
+                      } else {
+                        console.log('hola')
+
+                        setTempText([
+                          {
+                            id: selected.id,
+                            type: 'Pre-requisito',
+                            code: selected.codigo,
+                            name: selected.nombre,
+                          },
+                        ])
+                      }
+                    }}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Selecciona una materia" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">
+                        Ninguna (Sin seriación)
+                      </SelectItem>
+                      {availableSubjects?.map((asig) => (
+                        <SelectItem key={asig.id} value={asig.id}>
+                          {asig.codigo} - {asig.nombre}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              ) : type === 'evaluation' ? (
                 <div className="space-y-3">
                   <div className="space-y-2">
                     {evalRows.map((row) => (
@@ -563,85 +683,36 @@ function InfoCard({
                             )
                           }}
                         />
-
                         <Input
                           value={row.porcentaje}
                           placeholder="%"
                           type="number"
-                          min={1}
-                          max={100}
-                          step={1}
-                          inputMode="numeric"
                           onChange={(e) => {
                             const raw = e.target.value
-                            // Solo permitir '' o dígitos
                             if (raw !== '' && !/^\d+$/.test(raw)) return
 
-                            if (raw === '') {
-                              setEvalRows((prev) =>
-                                prev.map((r) =>
-                                  r.id === row.id
-                                    ? {
-                                        id: r.id,
-                                        criterio: r.criterio,
-                                        porcentaje: '',
-                                      }
-                                    : r,
-                                ),
-                              )
-                              return
-                            }
-
-                            const n = Number(raw)
-                            if (!Number.isFinite(n)) return
-                            const porcentaje = Math.trunc(n)
-                            if (porcentaje < 1 || porcentaje > 100) return
-
-                            // No permitir suma > 100
                             setEvalRows((prev) => {
                               const next = prev.map((r) =>
-                                r.id === row.id
-                                  ? {
-                                      id: r.id,
-                                      criterio: r.criterio,
-                                      porcentaje: raw,
-                                    }
-                                  : r,
+                                r.id === row.id ? { ...r, porcentaje: raw } : r,
+                              )
+                              const total = next.reduce(
+                                (acc, r) => acc + (Number(r.porcentaje) || 0),
+                                0,
                               )
-
-                              const total = next.reduce((acc, r) => {
-                                const v = String(r.porcentaje).trim()
-                                if (!v) return acc
-                                const nn = Number(v)
-                                if (!Number.isFinite(nn)) return acc
-                                const vv = Math.trunc(nn)
-                                if (vv < 1 || vv > 100) return acc
-                                return acc + vv
-                              }, 0)
-
                               return total > 100 ? prev : next
                             })
                           }}
                         />
-
-                        <div
-                          className="flex w-[1ch] items-center justify-center text-sm text-slate-600"
-                          aria-hidden
-                        >
-                          %
-                        </div>
-
+                        <div className="text-sm text-slate-600">%</div>
                         <Button
                           variant="ghost"
                           size="icon"
                           className="h-8 w-8 text-red-600 hover:bg-red-50"
-                          onClick={() => {
+                          onClick={() =>
                             setEvalRows((prev) =>
                               prev.filter((r) => r.id !== row.id),
                             )
-                          }}
-                          aria-label="Quitar renglón"
-                          title="Quitar"
+                          }
                         >
                           <Minus className="h-4 w-4" />
                         </Button>
@@ -651,22 +722,15 @@ function InfoCard({
 
                   <div className="flex items-center justify-between">
                     <span
-                      className={
-                        'text-sm ' +
-                        (evaluationTotal === 100
-                          ? 'text-muted-foreground'
-                          : 'text-destructive font-semibold')
-                      }
+                      className={`text-sm ${evaluationTotal === 100 ? 'text-muted-foreground' : 'text-destructive font-semibold'}`}
                     >
                       Total: {evaluationTotal}/100
                     </span>
-
                     <Button
                       variant="ghost"
                       size="sm"
                       className="text-emerald-700 hover:bg-emerald-50"
-                      onClick={() => {
-                        // Agregar una fila vacía (siempre permitido)
+                      onClick={() =>
                         setEvalRows((prev) => [
                           ...prev,
                           {
@@ -675,7 +739,7 @@ function InfoCard({
                             porcentaje: '',
                           },
                         ])
-                      }}
+                      }
                     >
                       <Plus className="mr-2 h-4 w-4" /> Agregar renglón
                     </Button>
@@ -689,28 +753,15 @@ function InfoCard({
                   className="min-h-30 text-sm leading-relaxed"
                 />
               )}
+
+              {/* Botones de acción comunes */}
               <div className="flex justify-end gap-2">
                 <Button
                   size="sm"
                   variant="ghost"
                   onClick={() => {
                     setIsEditing(false)
-                    if (type === 'evaluation') {
-                      const raw = Array.isArray(data) ? data : []
-                      setEvalRows(
-                        raw.map((r: CriterioEvaluacionRow) => ({
-                          id: crypto.randomUUID(),
-                          criterio:
-                            typeof r.criterio === 'string' ? r.criterio : '',
-                          porcentaje:
-                            typeof r.porcentaje === 'number'
-                              ? String(Math.trunc(r.porcentaje))
-                              : typeof r.porcentaje === 'string'
-                                ? String(Math.trunc(Number(r.porcentaje)))
-                                : '',
-                        })),
-                      )
-                    }
+                    // Lógica de reset si es necesario...
                   }}
                 >
                   Cancelar
@@ -726,6 +777,7 @@ function InfoCard({
               </div>
             </div>
           ) : (
+            /* Modo Visualización */
             <div className="text-sm leading-relaxed text-slate-600">
               {type === 'text' &&
                 (data ? (
@@ -734,9 +786,7 @@ function InfoCard({
                   <p className="text-slate-400 italic">Sin información.</p>
                 ))}
               {type === 'requirements' && <RequirementsView items={data} />}
-              {type === 'evaluation' && (
-                <EvaluationView items={data as Array<CriterioEvaluacionRow>} />
-              )}
+              {type === 'evaluation' && <EvaluationView items={data} />}
             </div>
           )}
         </CardContent>

src/data/api/subjects.api.ts

@@ -191,7 +191,7 @@ export async function subjects_get(subjectId: UUID): Promise<AsignaturaDetail> {
     .from('asignaturas')
     .select(
       `
-      id,plan_estudio_id,estructura_id,codigo,nombre,tipo,creditos,numero_ciclo,linea_plan_id,orden_celda,estado,datos,contenido_tematico,horas_academicas,horas_independientes,asignatura_hash,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en,criterios_de_evaluacion,
+      id,plan_estudio_id,estructura_id,codigo,nombre,tipo,creditos,numero_ciclo,linea_plan_id,orden_celda,estado,datos,contenido_tematico,horas_academicas,horas_independientes,asignatura_hash,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en,criterios_de_evaluacion,prerrequisito_asignatura_id,
       planes_estudio(
         id,carrera_id,estructura_id,nombre,nivel,tipo_ciclo,numero_ciclos,datos,estado_actual_id,activo,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en,
         carreras(id,facultad_id,nombre,nombre_corto,clave_sep,activa, facultades(id,nombre,nombre_corto,color,icono))

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

@@ -15,6 +15,7 @@ import {
   Archive,
   Loader2,
   Sparkles,
+  RotateCcw,
 } from 'lucide-react'
 import { useState, useEffect, useRef, useMemo } from 'react'
 
@@ -128,6 +129,7 @@ function RouteComponent() {
   const [pendingSuggestion, setPendingSuggestion] = useState<any>(null)
   const queryClient = useQueryClient()
   const scrollRef = useRef<HTMLDivElement>(null)
+  const isInitialLoad = useRef(true)
   const [showArchived, setShowArchived] = useState(false)
   const [editingChatId, setEditingChatId] = useState<string | null>(null)
   const editableRef = useRef<HTMLSpanElement>(null)
@@ -204,20 +206,20 @@ function RouteComponent() {
       return messages
     })
   }, [mensajesDelChat, activeChatId, availableFields])
-  const scrollToBottom = () => {
+  const scrollToBottom = (behavior = 'smooth') => {
     if (scrollRef.current) {
-      // Buscamos el viewport interno del ScrollArea de Radix
       const scrollContainer = scrollRef.current.querySelector(
         '[data-radix-scroll-area-viewport]',
       )
       if (scrollContainer) {
         scrollContainer.scrollTo({
           top: scrollContainer.scrollHeight,
-          behavior: 'smooth',
+          behavior: behavior, // 'instant' para carga inicial, 'smooth' para mensajes nuevos
         })
       }
     }
   }
+
   const { activeChats, archivedChats } = useMemo(() => {
     const allChats = lastConversation || []
     return {
@@ -229,22 +231,22 @@ function RouteComponent() {
   }, [lastConversation])
 
   useEffect(() => {
-    console.log(mensajesDelChat)
-
-    scrollToBottom()
-  }, [chatMessages, isLoading])
-
-  /* useEffect(() => {
-    // Verificamos cuáles campos de la lista "selectedFields" ya no están presentes en el texto del input
-    const camposActualizados = selectedFields.filter((field) =>
-      input.includes(field.label),
-    )
-
-    // Solo actualizamos el estado si hubo un cambio real (para evitar bucles infinitos)
-    if (camposActualizados.length !== selectedFields.length) {
-      setSelectedFields(camposActualizados)
+    if (chatMessages.length > 0) {
+      if (isInitialLoad.current) {
+        // Si es el primer render con mensajes, vamos al final al instante
+        scrollToBottom('instant')
+        isInitialLoad.current = false
+      } else {
+        // Si ya estaba cargado y llegan nuevos, hacemos el smooth
+        scrollToBottom('smooth')
+      }
     }
-  }, [input, selectedFields]) */
+  }, [chatMessages])
+
+  // 2. Resetear el flag cuando cambies de chat activo
+  useEffect(() => {
+    isInitialLoad.current = true
+  }, [activeChatId])
 
   useEffect(() => {
     if (isLoadingConv || isSending) return
@@ -508,27 +510,38 @@ function RouteComponent() {
         </div>
 
         <ScrollArea className="flex-1">
-          <div className="space-y-1">
+          <div className="space-y-1 pr-2">
+            {' '}
+            {/* Agregamos un pr-2 para que el scrollbar no tape botones */}
             {!showArchived ? (
               activeChats.map((chat) => (
                 <div
                   key={chat.id}
                   onClick={() => setActiveChatId(chat.id)}
-                  className={`group relative flex w-full items-center justify-between overflow-hidden rounded-lg px-3 py-3 text-sm transition-colors ${
+                  className={`group relative flex w-full items-center overflow-hidden rounded-lg px-3 py-3 text-sm transition-colors ${
                     activeChatId === chat.id
                       ? 'bg-slate-100 font-medium text-slate-900'
                       : 'text-slate-600 hover:bg-slate-50'
                   }`}
                 >
-                  {/* LADO IZQUIERDO: Icono + Texto con Tooltip */}
-                  <div className="flex min-w-0 flex-1 items-center gap-3">
+                  {/* LADO IZQUIERDO: Icono + Texto */}
+                  <div
+                    className="flex min-w-0 flex-1 items-center gap-3 transition-all duration-200"
+                    style={{
+                      // Aplicamos la máscara solo cuando el mouse está encima para que se note el desvanecimiento
+                      // donde aparecen los botones
+                      maskImage:
+                        'linear-gradient(to right, black 70%, transparent 95%)',
+                      WebkitMaskImage:
+                        'linear-gradient(to right, black 70%, transparent 95%)',
+                    }}
+                  >
+                    {/* pr-12 reserva espacio para los botones absolutos */}
                     <FileText size={16} className="shrink-0 opacity-40" />
-
                     <TooltipProvider delayDuration={400}>
                       <Tooltip>
-                        <TooltipTrigger asChild>
-                          {/* Este contenedor es el que obliga al span a truncarse */}
-                          <div className="max-w-[calc(100%-48px)] min-w-0 flex-1">
+                        <TooltipTrigger asChild className="min-w-0 flex-1">
+                          <div className="min-w-0 flex-1">
                             <span
                               ref={
                                 editingChatId === chat.id ? editableRef : null
@@ -574,8 +587,6 @@ function RouteComponent() {
                             </span>
                           </div>
                         </TooltipTrigger>
-
-                        {/* Tooltip: Solo aparece si no estás editando y el texto es largo */}
                         {editingChatId !== chat.id && (
                           <TooltipContent
                             side="right"
@@ -588,9 +599,9 @@ function RouteComponent() {
                     </TooltipProvider>
                   </div>
 
-                  {/* LADO DERECHO: Acciones con shrink-0 para que no se muevan */}
+                  {/* LADO DERECHO: Acciones ABSOLUTAS */}
                   <div
-                    className={`flex shrink-0 items-center gap-1 pl-2 opacity-0 transition-opacity group-hover:opacity-100 ${
+                    className={`absolute top-1/2 right-2 z-20 flex -translate-y-1/2 items-center gap-1 rounded-md px-1 opacity-0 transition-opacity group-hover:opacity-100 ${
                       activeChatId === chat.id ? 'bg-slate-100' : 'bg-slate-50'
                     }`}
                   >
@@ -614,7 +625,7 @@ function RouteComponent() {
                 </div>
               ))
             ) : (
-              /* Sección de archivados */
+              /* Sección de archivados (Simplificada para mantener consistencia) */
               <div className="animate-in fade-in slide-in-from-left-2 px-1">
                 <p className="mb-2 px-2 text-[10px] font-bold text-slate-400 uppercase">
                   Archivados
@@ -622,18 +633,18 @@ function RouteComponent() {
                 {archivedChats.map((chat) => (
                   <div
                     key={chat.id}
-                    className="group relative mb-1 flex w-full items-center justify-between overflow-hidden rounded-lg bg-slate-50/50 px-3 py-2 text-sm text-slate-400"
+                    className="group relative mb-1 flex w-full items-center overflow-hidden rounded-lg bg-slate-50/50 px-3 py-2 text-sm text-slate-400"
                   >
-                    <div className="flex min-w-0 flex-1 items-center gap-3">
+                    <div className="flex min-w-0 flex-1 items-center gap-3 pr-10">
                       <Archive size={14} className="shrink-0 opacity-30" />
-                      <span className="block min-w-0 flex-1 truncate">
+                      <span className="block truncate">
                         {chat.nombre ||
                           `Archivado ${chat.creado_en.split('T')[0]}`}
                       </span>
                     </div>
                     <button
                       onClick={(e) => unarchiveChat(e, chat.id)}
-                      className="ml-2 shrink-0 rounded bg-slate-50/80 p-1 opacity-0 transition-opacity group-hover:opacity-100 hover:text-teal-600"
+                      className="absolute top-1/2 right-2 shrink-0 -translate-y-1/2 rounded bg-slate-100 p-1 opacity-0 transition-opacity group-hover:opacity-100 hover:text-teal-600"
                     >
                       <RotateCcw size={14} />
                     </button>

src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx

@@ -166,30 +166,20 @@ function AsignaturaLayout() {
                   onSave={(val) => handleUpdateHeader('nombre', val)}
                 />
               </h1>
+              {
+                // console.log(headerData),
 
+                console.log(asignaturaApi.planes_estudio?.nombre)
+              }
               <div className="flex flex-wrap gap-4 text-sm text-blue-200">
                 <span className="flex items-center gap-1">
                   <GraduationCap className="h-4 w-4 shrink-0" />
+                  Pertenece al plan:{' '}
                   <span className="text-blue-100">
-                    {(asignaturaApi.planes_estudio?.datos as DatosPlan)
-                      .nombre || ''}
-                  </span>
-                </span>
-
-                <span className="flex items-center gap-1">
-                  <span className="text-blue-100">
-                    {(asignaturaApi.planes_estudio?.datos as DatosPlan)
-                      .nombre ?? ''}
+                    {(asignaturaApi.planes_estudio as DatosPlan).nombre || ''}
                   </span>
                 </span>
               </div>
-
-              <p className="text-sm text-blue-300">
-                Pertenece al plan:{' '}
-                <span className="cursor-pointer underline">
-                  {asignaturaApi.planes_estudio?.nombre}
-                </span>
-              </p>
             </div>
 
             <div className="flex flex-col items-end gap-2 text-right">