Se corrigen incidencias 35, 36, 33, 32

2026-01-26 13:52:12 -06:00
parent 695e069a9f
commit c15e2f941d
5 changed files with 192 additions and 112 deletions
--- a/src/components/asignaturas/detalle/MateriaDetailPage.tsx
+++ b/src/components/asignaturas/detalle/MateriaDetailPage.tsx
@@ -1,6 +1,7 @@
 import {
  createFileRoute,
  Link,
+  useNavigate,
  useParams,
  useRouterState,
 } from '@tanstack/react-router'
@@ -59,13 +60,17 @@ function EditableHeaderField({
  onSave: (val: string) => void
  className?: string
 }) {
+  const textValue = String(value)
+
  return (
    <input
      type="text"
-      value={String(value)}
+      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={` w-[${String(value).length || 1}ch] max-w-[6ch] border-none bg-transparent text-center outline-none focus:ring-2 focus:ring-blue-400 ${className ?? ''} `}
+      className={`border-none bg-transparent outline-none focus:ring-2 focus:ring-blue-400 ${className ?? ''}`}
    />
  )
 }
@@ -91,6 +96,7 @@ export default function MateriaDetailPage() {
  const [messages, setMessages] = useState<Array<IAMessage>>([])
  const [datosGenerales, setDatosGenerales] = useState({})
  const [campos, setCampos] = useState<Array<CampoEstructura>>([])
+  const [activeTab, setActiveTab] = useState('datos')

  // Dentro de MateriaDetailPage
  const [headerData, setHeaderData] = useState({
@@ -100,6 +106,13 @@ export default function MateriaDetailPage() {
    ciclo: 0,
  })

+  useEffect(() => {
+    // Si en el state de la ruta viene una pestaña específica, cámbiate a ella
+    if (state?.activeTab) {
+      setActiveTab(state.activeTab)
+    }
+  }, [state])
+
  // Sincronizar cuando llegue la API
  useEffect(() => {
    if (asignaturasApi) {
@@ -208,11 +221,23 @@ export default function MateriaDetailPage() {

              <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" />
-                  {asignaturasApi?.planes_estudio?.datos?.nombre}
+                  <GraduationCap className="h-4 w-4 shrink-0" />
+                  {/* Eliminamos el max-w y dejamos que el flex-wrap haga su trabajo */}
+                  <EditableHeaderField
+                    value={asignaturasApi?.planes_estudio?.datos?.nombre || ''}
+                    onSave={(val) => handleUpdateHeader('plan_nombre', val)}
+                    className="min-w-[10ch] text-blue-100" // min-w para que sea clickeable si está vacío
+                  />
                </span>
-                <span>
-                  {asignaturasApi?.planes_estudio?.carreras?.facultades?.nombre}
+                <span className="flex items-center gap-1">
+                  <EditableHeaderField
+                    value={
+                      asignaturasApi?.planes_estudio?.carreras?.facultades
+                        ?.nombre || ''
+                    }
+                    onSave={(val) => handleUpdateHeader('facultad_nombre', val)}
+                    className="min-w-[10ch] text-blue-100"
+                  />
                </span>
              </div>

@@ -258,7 +283,11 @@ export default function MateriaDetailPage() {
      {/* ================= TABS ================= */}
      <section className="border-b bg-white">
        <div className="mx-auto max-w-7xl px-6">
-          <Tabs defaultValue="datos">
+          <Tabs
+            value={activeTab}
+            onValueChange={setActiveTab}
+            className="w-full"
+          >
            <TabsList className="h-auto gap-6 bg-transparent p-0">
              <TabsTrigger value="datos">Datos generales</TabsTrigger>
              <TabsTrigger value="contenido">Contenido temático</TabsTrigger>
@@ -272,7 +301,11 @@ export default function MateriaDetailPage() {

            {/* ================= TAB: DATOS GENERALES ================= */}
            <TabsContent value="datos">
-              <DatosGenerales data={datosGenerales} isLoading={loadingAsig} />
+              <DatosGenerales
+                data={datosGenerales}
+                isLoading={loadingAsig}
+                asignaturaId={asignaturaId}
+              />
            </TabsContent>

            <TabsContent value="contenido">
@@ -330,10 +363,15 @@ export default function MateriaDetailPage() {

 /* ================= TAB CONTENT ================= */
 interface DatosGeneralesProps {
+  asignaturaId: string
  data: AsignaturaDatos
  isLoading: boolean
 }
-function DatosGenerales({ data, isLoading }: DatosGeneralesProps) {
+function DatosGenerales({
+  data,
+  isLoading,
+  asignaturaId,
+}: DatosGeneralesProps) {
  const formatTitle = (key: string): string =>
    key.replace(/_/g, ' ').replace(/\b\w/g, (l: string) => l.toUpperCase())

@@ -360,7 +398,9 @@ function DatosGenerales({ data, isLoading }: DatosGeneralesProps) {
          {!isLoading &&
            Object.entries(data).map(([key, value]) => (
              <InfoCard
+                asignaturaId={asignaturaId}
                key={key}
+                clave={key}
                title={formatTitle(key)}
                initialContent={value}
                onEnhanceAI={(contenido) => {
@@ -411,6 +451,8 @@ function DatosGenerales({ data, isLoading }: DatosGeneralesProps) {
 }

 interface InfoCardProps {
+  asignaturaId?: string
+  clave: string
  title: string
  initialContent: any
  type?: 'text' | 'requirements' | 'evaluation'
@@ -418,6 +460,8 @@ interface InfoCardProps {
 }

 function InfoCard({
+  asignaturaId,
+  clave,
  title,
  initialContent,
  type = 'text',
@@ -428,11 +472,27 @@ function InfoCard({
  const [tempText, setTempText] = useState(
    type === 'text' ? initialContent : JSON.stringify(initialContent, null, 2),
  )
-
+  const navigate = useNavigate()
  const handleSave = () => {
    setData(tempText)
    setIsEditing(false)
  }
+  const handleIARequest = (data) => {
+    console.log(data)
+    console.log(asignaturaId)
+
+    navigate({
+      to: '/planes/$planId/asignaturas/$asignaturaId',
+      params: {
+        asignaturaId: asignaturaId,
+      },
+      state: {
+        activeTab: 'ia',
+        prefillCampo: data,
+        prefillContenido: data, // el contenido actual del card
+      } as any,
+    })
+  }

  return (
    <Card className="transition-all hover:border-slate-300">
@@ -448,7 +508,7 @@ function InfoCard({
              variant="ghost"
              size="icon"
              className="h-8 w-8 text-blue-500 hover:bg-blue-50 hover:text-blue-600"
-              onClick={() => onEnhanceAI?.(data)} // Enviamos la data actual a la IA
+              onClick={() => handleIARequest(clave)} // Enviamos la data actual a la IA
              title="Mejorar con IA"
            >
              <Sparkles className="h-4 w-4" />
--- a/src/data/api/plans.api.ts
+++ b/src/data/api/plans.api.ts
@@ -178,7 +178,7 @@ export async function plans_history(planId: UUID): Promise<Array<CambioPlan>> {
  const { data, error } = await supabase
    .from('cambios_plan')
    .select(
-      'id,plan_estudio_id,cambiado_por,cambiado_en,tipo,campo,valor_anterior,valor_nuevo,interaccion_ia_id',
+      'id,plan_estudio_id,cambiado_por,cambiado_en,tipo,campo,valor_anterior,valor_nuevo',
    )
    .eq('plan_estudio_id', planId)
    .order('cambiado_en', { ascending: false })
--- a/src/routes/planes/$planId/_detalle/documento.tsx
+++ b/src/routes/planes/$planId/_detalle/documento.tsx
@@ -8,6 +8,7 @@ import {
  Clock,
  FileJson,
 } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'

 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
@@ -19,9 +20,34 @@ export const Route = createFileRoute('/planes/$planId/_detalle/documento')({

 function RouteComponent() {
  const { planId } = useParams({ from: '/planes/$planId/_detalle/documento' })
-  const handleDownloadPdf = async () => {
-    console.log('entre aqui ')
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)

+  const loadPdfPreview = useCallback(async () => {
+    try {
+      setIsLoading(true)
+      const pdfBlob = await fetchPlanPdf({ plan_estudio_id: planId })
+      const url = window.URL.createObjectURL(pdfBlob)
+
+      // Limpiar URL anterior si existe para evitar fugas de memoria
+      if (pdfUrl) window.URL.revokeObjectURL(pdfUrl)
+
+      setPdfUrl(url)
+    } catch (error) {
+      console.error('Error cargando preview:', error)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [planId])
+
+  useEffect(() => {
+    loadPdfPreview()
+    return () => {
+      if (pdfUrl) window.URL.revokeObjectURL(pdfUrl)
+    }
+  }, [loadPdfPreview])
+
+  const handleDownloadPdf = async () => {
    try {
      const pdfBlob = await fetchPlanPdf({
        plan_estudio_id: planId,
@@ -54,7 +80,12 @@ function RouteComponent() {
          </p>
        </div>
        <div className="flex gap-2">
-          <Button variant="outline" size="sm" className="gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="gap-2"
+            onClick={loadPdfPreview}
+          >
            <RefreshCcw size={16} /> Regenerar
          </Button>
          <Button variant="outline" size="sm" className="gap-2">
@@ -90,70 +121,42 @@ function RouteComponent() {
      </div>

      {/* CONTENEDOR DEL DOCUMENTO (Visor) */}
+      {/* CONTENEDOR DEL VISOR REAL */}
      <Card className="overflow-hidden border-slate-200 shadow-sm">
        <div className="flex items-center justify-between border-b bg-slate-100/50 p-2 px-4">
          <div className="flex items-center gap-2 text-xs font-medium text-slate-500">
-            <FileText size={14} />
-            Plan_Estudios_ISC_2024.pdf
+            <FileText size={14} /> Preview_Documento.pdf
          </div>
-          <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs">
-            Abrir en nueva pestaña <ExternalLink size={12} />
-          </Button>
+          {pdfUrl && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 gap-1 text-xs"
+              onClick={() => window.open(pdfUrl, '_blank')}
+            >
+              Abrir en nueva pestaña <ExternalLink size={12} />
+            </Button>
+          )}
        </div>

-        <CardContent className="flex min-h-[800px] justify-center bg-slate-200/50 p-0 py-8">
-          {/* SIMULACIÓN DE HOJA DE PAPEL */}
-          <div className="relative min-h-[1000px] w-full max-w-[800px] border bg-white p-12 shadow-2xl md:p-16">
-            {/* Contenido del Plan */}
-            <div className="mb-12 text-center">
-              <p className="mb-1 text-xs font-bold tracking-widest text-slate-400 uppercase">
-                Universidad Tecnológica
-              </p>
-              <h2 className="text-2xl font-bold text-slate-800">
-                Plan de Estudios 2024
-              </h2>
-              <h3 className="text-lg font-semibold text-teal-700">
-                Ingeniería en Sistemas Computacionales
-              </h3>
-              <p className="mt-1 text-xs text-slate-500">
-                Facultad de Ingeniería
-              </p>
+        <CardContent className="flex min-h-[800px] justify-center bg-slate-500 p-0">
+          {isLoading ? (
+            <div className="flex flex-col items-center justify-center gap-4 text-white">
+              <RefreshCcw size={40} className="animate-spin opacity-50" />
+              <p className="animate-pulse">Generando vista previa del PDF...</p>
            </div>
-
-            <div className="space-y-8 text-slate-700">
-              <section>
-                <h4 className="mb-2 text-sm font-bold">1. Objetivo General</h4>
-                <p className="text-justify text-sm leading-relaxed">
-                  Formar profesionales altamente capacitados en el desarrollo de
-                  soluciones tecnológicas innovadoras, con sólidos conocimientos
-                  en programación, bases de datos, redes y seguridad
-                  informática.
-                </p>
-              </section>
-
-              <section>
-                <h4 className="mb-2 text-sm font-bold">2. Perfil de Ingreso</h4>
-                <p className="text-justify text-sm leading-relaxed">
-                  Egresados de educación media superior con conocimientos
-                  básicos de matemáticas, razonamiento lógico y habilidades de
-                  comunicación. Interés por la tecnología y la resolución de
-                  problemas.
-                </p>
-              </section>
-
-              <section>
-                <h4 className="mb-2 text-sm font-bold">3. Perfil de Egreso</h4>
-                <p className="text-justify text-sm leading-relaxed">
-                  Profesional capaz de diseñar, desarrollar e implementar
-                  sistemas de software de calidad, administrar infraestructuras
-                  de red y liderar proyectos tecnológicos multidisciplinarios.
-                </p>
-              </section>
+          ) : pdfUrl ? (
+            /* 3. VISOR DE PDF REAL */
+            <iframe
+              src={`${pdfUrl}#toolbar=0&navpanes=0`}
+              className="h-[1000px] w-full max-w-[1000px] border-none shadow-2xl"
+              title="PDF Preview"
+            />
+          ) : (
+            <div className="flex items-center justify-center p-20 text-slate-400">
+              No se pudo cargar la vista previa.
            </div>
-
-            {/* Marca de agua o decoración lateral (opcional) */}
-            <div className="absolute top-0 left-0 h-full w-1 bg-slate-100" />
-          </div>
+          )}
        </CardContent>
      </Card>
    </div>
--- a/src/routes/planes/$planId/_detalle/historial.tsx
+++ b/src/routes/planes/$planId/_detalle/historial.tsx
@@ -1,5 +1,6 @@
-import { useMemo, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
+import { format, formatDistanceToNow, parseISO } from 'date-fns'
+import { es } from 'date-fns/locale'
 import {
  GitBranch,
  Edit3,
@@ -12,19 +13,17 @@ import {
  History,
  Calendar,
 } from 'lucide-react'
+import { useMemo, useState } from 'react'
+
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent } from '@/components/ui/card'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
 } from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
 import { usePlanHistorial } from '@/data/hooks/usePlans'
-import { format, formatDistanceToNow, parseISO } from 'date-fns'
-import { es } from 'date-fns/locale'

 export const Route = createFileRoute('/planes/$planId/_detalle/historial')({
  component: RouteComponent,
@@ -58,9 +57,7 @@ const getEventConfig = (tipo: string, campo: string) => {

 function RouteComponent() {
  const { planId } = Route.useParams()
-  const { data: rawData, isLoading } = usePlanHistorial(
-    '0e0aea4d-b8b4-4e75-8279-6224c3ac769f',
-  )
+  const { data: rawData, isLoading } = usePlanHistorial(planId)

  // ESTADOS PARA EL MODAL
  const [selectedEvent, setSelectedEvent] = useState<any>(null)
--- a/src/routes/planes/$planId/_detalle/iaplan.tsx
+++ b/src/routes/planes/$planId/_detalle/iaplan.tsx
@@ -106,7 +106,7 @@ function RouteComponent() {
      if (field && !selectedFields.find((sf) => sf.key === field.key)) {
        setSelectedFields([field])
      }
-      setInput(`Mejora este campo: `)
+      setInput(`Mejora este campo: [${field?.label}] `)
    }
  }, [availableFields])

@@ -121,46 +121,85 @@ function RouteComponent() {
    }
  }

+  const injectFieldsIntoInput = (
+    input: string,
+    fields: Array<SelectedField>,
+  ) => {
+    const baseText = input.replace(/\[[^\]]+]/g, '').trim()
+
+    const tags = fields.map((f) => `[${f.label}]`).join(' ')
+
+    return `${baseText} ${tags}`.trim()
+  }
  const toggleField = (field: SelectedField) => {
-    setSelectedFields((prev) =>
-      prev.find((f) => f.key === field.key)
-        ? prev.filter((f) => f.key !== field.key)
-        : [...prev, field],
-    )
-    if (input.endsWith(':')) setInput(input.slice(0, -1))
+    setSelectedFields((prev) => {
+      let nextFields
+
+      if (prev.find((f) => f.key === field.key)) {
+        nextFields = prev.filter((f) => f.key !== field.key)
+      } else {
+        nextFields = [...prev, field]
+      }
+
+      setInput((prevInput) =>
+        injectFieldsIntoInput(prevInput || 'Mejora este campo:', nextFields),
+      )
+
+      return nextFields
+    })
+
    setShowSuggestions(false)
  }
+  const buildPrompt = (userInput: string) => {
+    if (selectedFields.length === 0) return userInput
+
+    const fieldsText = selectedFields
+      .map((f) => `- ${f.label}: ${f.value || '(sin contenido)'}`)
+      .join('\n')
+
+    return `
+${userInput || 'Mejora los siguientes campos:'}
+
+Campos a analizar:
+${fieldsText}
+`.trim()
+  }

  const handleSend = async (promptOverride?: string) => {
-    const textToSend = promptOverride || input
-    if (!textToSend.trim() && selectedFields.length === 0) return
+    const rawText = promptOverride || input
+    if (!rawText.trim() && selectedFields.length === 0) return
+
+    const finalPrompt = buildPrompt(rawText)

    const userMsg = {
      id: Date.now().toString(),
      role: 'user',
-      content: textToSend,
+      content: finalPrompt,
    }
+
    setMessages((prev) => [...prev, userMsg])
    setInput('')
    setIsLoading(true)

-    // Aquí simularías la llamada a la API enviando 'selectedFields' como contexto
    setTimeout(() => {
      const mockText =
        'Sugerencia generada basada en los campos seleccionados...'
+
      setMessages((prev) => [
        ...prev,
        {
          id: Date.now().toString(),
          role: 'assistant',
-          content: `He analizado ${selectedFields.length > 0 ? selectedFields.map((f) => f.label).join(', ') : 'tu solicitud'}. Aquí tienes una propuesta:\n\n${mockText}`,
+          content: `He analizado ${selectedFields
+            .map((f) => f.label)
+            .join(', ')}. Aquí tienes una propuesta:\n\n${mockText}`,
        },
      ])
+
      setPendingSuggestion({ text: mockText })
      setIsLoading(false)
    }, 1200)
  }
-
  return (
    <div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
      {/* PANEL DE CHAT PRINCIPAL */}
@@ -169,27 +208,8 @@ function RouteComponent() {
        <div className="shrink-0 border-b bg-white p-3">
          <div className="flex flex-wrap items-center gap-2">
            <span className="text-[10px] font-bold text-slate-400 uppercase">
-              Campos a mejorar:
+              Mejorar con IA
            </span>
-            {selectedFields.map((field) => (
-              <div
-                key={field.key}
-                className="animate-in zoom-in-95 flex items-center gap-1.5 rounded-lg border border-teal-100 bg-teal-50 px-2 py-1 text-xs font-medium text-teal-700"
-              >
-                {field.label}
-                <button
-                  onClick={() => toggleField(field)}
-                  className="hover:text-red-500"
-                >
-                  <X size={12} />
-                </button>
-              </div>
-            ))}
-            {selectedFields.length === 0 && (
-              <span className="text-xs text-slate-400 italic">
-                Escribe ":" para añadir campos
-              </span>
-            )}
          </div>
        </div>