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

Merge pull request 'Que no haga scroll fix #193 ' (#199 ) from issue/193-que-no-haga-scroll into main
Reviewed-on: #199
2026-03-20 16:09:39 -06:00 · 2026-03-19 20:20:45 +00:00 · 2026-03-19 20:20:30 +00:00 · 2026-03-19 14:18:21 -06:00 · 2026-03-19 13:58:43 +00:00 · 2026-03-19 13:56:12 +00:00
10 changed files with 298 additions and 203 deletions
--- a/.gitea/workflows/deploy.yaml
+++ b/.gitea/workflows/deploy.yaml
@@ -0,0 +1,37 @@
+name: Deploy to Azure Static Web Apps
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Build
+        env:
+          VITE_SUPABASE_URL: ${{ vars.VITE_SUPABASE_URL }}
+          VITE_SUPABASE_ANON_KEY: ${{ vars.VITE_SUPABASE_ANON_KEY }}
+        run: bunx --bun vite build
+
+      # No hace falta instalar el CLI globalmente, usamos bunx
+      - name: Deploy to Azure Static Web Apps
+        env:
+          AZURE_SWA_DEPLOYMENT_TOKEN: ${{ secrets.AZURE_SWA_DEPLOYMENT_TOKEN }}
+        run: |
+          bunx @azure/static-web-apps-cli deploy ./dist \
+            --env production \
+            --deployment-token "$AZURE_SWA_DEPLOYMENT_TOKEN"
--- a/src/components/asignaturas/detalle/AsignaturaDetailPage.tsx
+++ b/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>
--- a/src/data/api/plans.api.ts
+++ b/src/data/api/plans.api.ts
@@ -207,7 +207,7 @@ export async function plan_asignaturas_list(
  const { data, error } = await supabase
    .from('asignaturas')
    .select(
-      'id,plan_estudio_id,horas_academicas,horas_independientes,estructura_id,codigo,nombre,tipo,creditos,numero_ciclo,linea_plan_id,orden_celda,estado,datos,contenido_tematico,asignatura_hash,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en',
+      'id,plan_estudio_id,horas_academicas,horas_independientes,estructura_id,codigo,nombre,tipo,creditos,numero_ciclo,linea_plan_id,orden_celda,estado,datos,contenido_tematico,asignatura_hash,tipo_origen,meta_origen,creado_por,actualizado_por,creado_en,actualizado_en,prerrequisito_asignatura_id',
    )
    .eq('plan_estudio_id', planId)
    .order('numero_ciclo', { ascending: true, nullsFirst: false })
--- a/src/data/api/subjects.api.ts
+++ b/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))
--- a/src/routes/planes/$planId/_detalle/iaplan.tsx
+++ b/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>
--- a/src/routes/planes/$planId/_detalle/mapa.tsx
+++ b/src/routes/planes/$planId/_detalle/mapa.tsx
@@ -76,7 +76,7 @@ const mapAsignaturasToAsignaturas = (
      // Mapeo directo de los nuevos campos de la API
      hd: asig.horas_academicas ?? 0,
      hi: asig.horas_independientes ?? 0,
-      prerrequisitos: [],
+      prerrequisito_asignatura_id: asig.prerrequisito_asignatura_id ?? null,
    }
  })
 }
@@ -336,6 +336,7 @@ function MapaCurricularPage() {
      horas_independientes?: TablesUpdate<'asignaturas'>['horas_independientes']
      numero_ciclo?: TablesUpdate<'asignaturas'>['numero_ciclo']
      linea_plan_id?: TablesUpdate<'asignaturas'>['linea_plan_id']
+      prerrequisito_asignatura_id?: string | null
    }
    const patch: Partial<AsignaturaPatch> = {
      nombre: editingData.nombre,
@@ -345,6 +346,7 @@ function MapaCurricularPage() {
      horas_independientes: editingData.hi,
      numero_ciclo: editingData.ciclo,
      linea_plan_id: editingData.lineaCurricularId,
+      prerrequisito_asignatura_id: editingData.prerrequisito_asignatura_id,
      tipo: editingData.tipo.toUpperCase() as TipoAsignatura, // Asegurar que coincida con el ENUM (OBLIGATORIA/OPTATIVA)
    }

@@ -490,7 +492,7 @@ function MapaCurricularPage() {
    e: React.FocusEvent<HTMLSpanElement>,
    id: string,
  ) => {
-    const nuevoNombre = e.currentTarget.textContent?.trim() || ''
+    const nuevoNombre = e.currentTarget.textContent.trim() || ''

    // Buscamos la línea original para comparar
    const lineaOriginal = lineas.find((l) => l.id === id)
@@ -935,65 +937,55 @@ function MapaCurricularPage() {
              {/* Fila 4: Seriación (Prerrequisitos) */}
              <div className="space-y-2">
                <label className="text-xs font-bold text-slate-500 uppercase">
-                  Seriación (Prerrequisitos)
+                  Seriación (Prerrequisito)
                </label>
                <Select
-                  value={seriacionValue}
+                  // Cambiamos a manejo de valor único basado en el ID de la columna
+                  value={editingData.prerrequisito_asignatura_id || undefined}
                  onValueChange={(val) => {
-                    if (val === 'none') {
-                      setSeriacionValue('')
-                      return
-                    }
-                    if (!editingData.prerrequisitos.includes(val)) {
-                      setEditingData({
-                        ...editingData,
-                        prerrequisitos: [...editingData.prerrequisitos, val],
-                      })
-                    }
-                    setSeriacionValue('')
+                    console.log(editingData)
+
+                    setEditingData({
+                      ...editingData,
+                      prerrequisito_asignatura_id: val === 'none' ? null : val,
+                    })
                  }}
                >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full bg-white">
                    <SelectValue placeholder="Seleccionar asignatura..." />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">-- Sin Seriación --</SelectItem>

                    {asignaturas
-                      .filter((m) => m.id !== editingData.id)
-                      .map((m) => (
-                        <SelectItem key={m.id} value={m.id}>
-                          {m.nombre} ({m.clave})
+                      .filter((asig) => {
+                        // 1. No es la misma materia
+                        const noEsMisma = asig.id !== editingData.id
+                        // 2. El ciclo debe ser estrictamente MENOR
+                        const esCicloMenor =
+                          asig.ciclo !== null &&
+                          editingData.ciclo !== null &&
+                          asig.ciclo < editingData.ciclo
+
+                        return noEsMisma && esCicloMenor
+                      })
+                      .sort(
+                        (a, b) =>
+                          (a.ciclo || 0) - (b.ciclo || 0) ||
+                          a.nombre.localeCompare(b.nombre),
+                      )
+                      .map((asig) => (
+                        <SelectItem key={asig.id} value={asig.id}>
+                          <span className="font-bold text-teal-600">
+                            [C{asig.ciclo}]
+                          </span>{' '}
+                          {asig.nombre}
                        </SelectItem>
                      ))}
                  </SelectContent>
                </Select>

-                {/* Visualización de los prerrequisitos seleccionados */}
-                <div className="mt-2 flex flex-wrap gap-2">
-                  {editingData.prerrequisitos.map((pre) => (
-                    <Badge
-                      key={pre}
-                      variant="secondary"
-                      className="bg-slate-100 text-slate-600"
-                    >
-                      {pre}
-                      <button
-                        className="ml-1 hover:text-red-500"
-                        onClick={() => {
-                          setEditingData({
-                            ...editingData,
-                            prerrequisitos: editingData.prerrequisitos.filter(
-                              (p) => p !== pre,
-                            ),
-                          })
-                        }}
-                      >
-                        ×
-                      </button>
-                    </Badge>
-                  ))}
-                </div>
+                {/* Visualización del Prerrequisito con el Nombre */}
              </div>

              {/* Fila 5: Tipo */}
--- a/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
+++ b/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">
--- a/src/types/plan.ts
+++ b/src/types/plan.ts
@@ -50,7 +50,7 @@ export interface Asignatura {
  orden?: number
  hd: number // <--- Añadir
  hi: number // <--- Añadir
-  prerrequisitos: Array<string>
+  prerrequisito_asignatura_id: string | null
 }

 export interface Plan {
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -156,6 +156,7 @@ export type Database = {
          plan_estudio_id: string
          tipo: Database['public']['Enums']['tipo_asignatura']
          tipo_origen: Database['public']['Enums']['tipo_origen'] | null
+          prerrequisito_asignatura_id?: string
        }
        Insert: {
          actualizado_en?: string
--- a/staticwebapp.config.json
+++ b/staticwebapp.config.json
@@ -0,0 +1,14 @@
+{
+  "navigationFallback": {
+    "rewrite": "/index.html",
+    "exclude": [
+      "/assets/*",
+      "/*.css",
+      "/*.js",
+      "/*.ico",
+      "/*.png",
+      "/*.jpg",
+      "/*.svg"
+    ]
+  }
+}
Author	SHA1	Message	Date
Roberto.silva	9fd816bfa1	Actualizar esta sección de seriación fix #195	2026-03-20 16:09:39 -06:00
Roberto Silva Corona	658b2e245c	Merge pull request 'Que no haga scroll fix #193 ' (#199 ) from issue/193-que-no-haga-scroll into main All checks were successful Deploy to Azure Static Web Apps / build-and-deploy (push) Successful in 1m20s Details Reviewed-on: #199	2026-03-19 20:20:45 +00:00
Roberto Silva Corona	30562fead0	Merge branch 'main' into issue/193-que-no-haga-scroll	2026-03-19 20:20:30 +00:00
Roberto.silva	2b91004129	Que no haga scroll #193	2026-03-19 14:18:21 -06:00
Alejandro Rosales	96a045dc67	Añadir staticwebapp.config.json All checks were successful Deploy to Azure Static Web Apps / build-and-deploy (push) Successful in 1m7s Details	2026-03-19 13:58:43 +00:00
Alejandro Rosales	a8229f12d5	Actualizar .gitea/workflows/deploy.yaml All checks were successful Deploy to Azure Static Web Apps / build-and-deploy (push) Successful in 1m30s Details	2026-03-19 13:56:12 +00:00
Alejandro Rosales	dd4ac5374a	Añadir .gitea/workflows/deploy.yaml Some checks failed Deploy to Azure Static Web Apps / build-and-deploy (push) Failing after 48s Details	2026-03-18 22:39:50 +00:00
Roberto Silva Corona	670e0b1d14	Merge pull request 'Que se guarden las seriaciones fix #175 fix #151 fix #180 ' (#191 ) from issue/175-que-se-guarden-las-seriaciones into main Reviewed-on: #191	2026-03-18 22:10:20 +00:00
Roberto Silva Corona	93fe247a19	Merge branch 'main' into issue/175-que-se-guarden-las-seriaciones	2026-03-18 22:10:09 +00:00
Roberto.silva	32ebfde9ed	Que se guarden las seriaciones fix #175 fix #151 fix #180	2026-03-18 15:48:49 -06:00