Se corrigen incidencias 35, 36, 33, 32

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>

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)

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>