Se corrigen incidencias

2026-01-23 10:57:54 -06:00
parent ffed64dbcd
commit 695e069a9f
8 changed files with 266 additions and 135 deletions
--- a/src/routes/planes/$planId/_detalle/datos.tsx
+++ b/src/routes/planes/$planId/_detalle/datos.tsx
@@ -19,7 +19,7 @@ const formatLabel = (key: string) => {

 function DatosGeneralesPage() {
  const { planId } = Route.useParams()
-  const { data } = usePlan(planId)
+  const { data, isLoading } = usePlan(planId)
  const navigate = useNavigate()
  // Inicializamos campos como un arreglo vacío
  const [campos, setCampos] = useState<Array<DatosGeneralesField>>([])
--- a/src/routes/planes/$planId/_detalle/documento.tsx
+++ b/src/routes/planes/$planId/_detalle/documento.tsx
@@ -1,29 +1,57 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { 
-  FileText, 
-  Download, 
-  RefreshCcw, 
-  ExternalLink, 
-  CheckCircle2, 
-  Clock, 
-  FileJson 
-} from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
+import { createFileRoute, useParams } from '@tanstack/react-router'
+import {
+  FileText,
+  Download,
+  RefreshCcw,
+  ExternalLink,
+  CheckCircle2,
+  Clock,
+  FileJson,
+} from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { fetchPlanPdf } from '@/data/api/document.api'

 export const Route = createFileRoute('/planes/$planId/_detalle/documento')({
  component: RouteComponent,
 })

 function RouteComponent() {
+  const { planId } = useParams({ from: '/planes/$planId/_detalle/documento' })
+  const handleDownloadPdf = async () => {
+    console.log('entre aqui ')
+
+    try {
+      const pdfBlob = await fetchPlanPdf({
+        plan_estudio_id: planId,
+      })
+
+      const url = window.URL.createObjectURL(pdfBlob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = 'plan_estudios.pdf'
+      document.body.appendChild(link)
+      link.click()
+
+      link.remove()
+      window.URL.revokeObjectURL(url)
+    } catch (error) {
+      console.error(error)
+      alert('No se pudo generar el PDF')
+    }
+  }
  return (
-    <div className="flex flex-col gap-6 p-6 bg-slate-50/30 min-h-screen">
-      
+    <div className="flex min-h-screen flex-col gap-6 bg-slate-50/30 p-6">
      {/* HEADER DE ACCIONES */}
-      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+      <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
        <div>
-          <h1 className="text-xl font-bold text-slate-800">Documento del Plan</h1>
-          <p className="text-sm text-muted-foreground">Vista previa y descarga del documento oficial</p>
+          <h1 className="text-xl font-bold text-slate-800">
+            Documento del Plan
+          </h1>
+          <p className="text-muted-foreground text-sm">
+            Vista previa y descarga del documento oficial
+          </p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" className="gap-2">
@@ -32,80 +60,99 @@ function RouteComponent() {
          <Button variant="outline" size="sm" className="gap-2">
            <Download size={16} /> Descargar Word
          </Button>
-          <Button size="sm" className="gap-2 bg-teal-700 hover:bg-teal-800">
+          <Button
+            size="sm"
+            className="gap-2 bg-teal-700 hover:bg-teal-800"
+            onClick={handleDownloadPdf}
+          >
            <Download size={16} /> Descargar PDF
          </Button>
        </div>
      </div>

      {/* TARJETAS DE ESTADO */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <StatusCard 
-          icon={<CheckCircle2 className="text-green-500" />} 
-          label="Estado" 
-          value="Generado" 
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <StatusCard
+          icon={<CheckCircle2 className="text-green-500" />}
+          label="Estado"
+          value="Generado"
        />
-        <StatusCard 
-          icon={<Clock className="text-blue-500" />} 
-          label="Última generación" 
-          value="28 Ene 2024, 11:30" 
+        <StatusCard
+          icon={<Clock className="text-blue-500" />}
+          label="Última generación"
+          value="28 Ene 2024, 11:30"
        />
-        <StatusCard 
-          icon={<FileJson className="text-orange-500" />} 
-          label="Versión" 
-          value="v1.2" 
+        <StatusCard
+          icon={<FileJson className="text-orange-500" />}
+          label="Versión"
+          value="v1.2"
        />
      </div>

      {/* CONTENEDOR DEL DOCUMENTO (Visor) */}
-      <Card className="border-slate-200 shadow-sm overflow-hidden">
-        <div className="bg-slate-100/50 p-2 border-b flex justify-between items-center px-4">
-          <div className="flex items-center gap-2 text-xs text-slate-500 font-medium">
+      <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
          </div>
-          <Button variant="ghost" size="sm" className="text-xs gap-1 h-7">
+          <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs">
            Abrir en nueva pestaña <ExternalLink size={12} />
          </Button>
        </div>
-        
-        <CardContent className="p-0 bg-slate-200/50 flex justify-center py-8 min-h-[800px]">
+
+        <CardContent className="flex min-h-[800px] justify-center bg-slate-200/50 p-0 py-8">
          {/* SIMULACIÓN DE HOJA DE PAPEL */}
-          <div className="bg-white w-full max-w-[800px] shadow-2xl p-12 md:p-16 min-h-[1000px] border relative">
-            
+          <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="text-center mb-12">
-              <p className="text-xs uppercase tracking-widest text-slate-400 font-bold mb-1">Universidad Tecnológica</p>
-              <h2 className="text-2xl font-bold text-slate-800">Plan de Estudios 2024</h2>
-              <h3 className="text-lg text-teal-700 font-semibold">Ingeniería en Sistemas Computacionales</h3>
-              <p className="text-xs text-slate-500 mt-1">Facultad de Ingeniería</p>
+            <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>
            </div>

            <div className="space-y-8 text-slate-700">
              <section>
-                <h4 className="font-bold text-sm mb-2">1. Objetivo General</h4>
-                <p className="text-sm leading-relaxed text-justify">
-                  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.
+                <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="font-bold text-sm mb-2">2. Perfil de Ingreso</h4>
-                <p className="text-sm leading-relaxed text-justify">
-                  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.
+                <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="font-bold text-sm mb-2">3. Perfil de Egreso</h4>
-                <p className="text-sm leading-relaxed text-justify">
-                  Profesional capaz de diseñar, desarrollar e implementar sistemas de software de calidad, administrar infraestructuras de red y liderar proyectos tecnológicos multidisciplinarios.
+                <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>
            </div>

            {/* Marca de agua o decoración lateral (opcional) */}
-            <div className="absolute top-0 left-0 w-1 h-full bg-slate-100" />
+            <div className="absolute top-0 left-0 h-full w-1 bg-slate-100" />
          </div>
        </CardContent>
      </Card>
@@ -114,18 +161,26 @@ function RouteComponent() {
 }

 // Componente pequeño para las tarjetas de estado superior
-function StatusCard({ icon, label, value }: { icon: React.ReactNode, label: string, value: string }) {
+function StatusCard({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode
+  label: string
+  value: string
+}) {
  return (
-    <Card className="bg-white border-slate-200">
-      <CardContent className="p-4 flex items-center gap-4">
-        <div className="p-2 rounded-full bg-slate-50 border">
-          {icon}
-        </div>
+    <Card className="border-slate-200 bg-white">
+      <CardContent className="flex items-center gap-4 p-4">
+        <div className="rounded-full border bg-slate-50 p-2">{icon}</div>
        <div>
-          <p className="text-[10px] uppercase font-bold text-slate-400 tracking-tight">{label}</p>
+          <p className="text-[10px] font-bold tracking-tight text-slate-400 uppercase">
+            {label}
+          </p>
          <p className="text-sm font-semibold text-slate-700">{value}</p>
        </div>
      </CardContent>
    </Card>
  )
-}
+}
--- a/src/routes/planes/$planId/_detalle/route.tsx
+++ b/src/routes/planes/$planId/_detalle/route.tsx
@@ -12,11 +12,12 @@ import { useState, useEffect } from 'react'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from '@/components/ui/context-menu'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Skeleton } from '@/components/ui/skeleton'
 import { usePlan } from '@/data/hooks/usePlans'

 export const Route = createFileRoute('/planes/$planId/_detalle')({
@@ -25,7 +26,7 @@ export const Route = createFileRoute('/planes/$planId/_detalle')({

 function RouteComponent() {
  const { planId } = Route.useParams()
-  const { data } = usePlan(planId)
+  const { data, isLoading } = usePlan(planId)

  // Estados locales para manejar la edición "en vivo" antes de persistir
  const [nombrePlan, setNombrePlan] = useState('')
@@ -87,63 +88,86 @@ function RouteComponent() {

      <div className="mx-auto max-w-[1600px] space-y-8 p-8">
        {/* Header del Plan */}
-        <div className="flex flex-col items-start justify-between gap-4 md:flex-row">
-          <div>
-            <h1 className="flex items-baseline gap-2 text-3xl font-bold tracking-tight text-slate-900">
-              <span>{nivelPlan} en</span>
-              <span
-                role="textbox"
-                tabIndex={0}
-                contentEditable
-                suppressContentEditableWarning
-                spellCheck={false} // Quita el subrayado rojo de error ortográfico
-                onKeyDown={handleKeyDown}
-                onBlur={(e) => setNombrePlan(e.currentTarget.textContent || '')}
-                className="cursor-text border-b border-transparent decoration-transparent transition-colors outline-none select-text hover:border-slate-300 focus:border-teal-500"
-                style={{ WebkitTextDecoration: 'none', textDecoration: 'none' }} // Doble seguridad contra subrayados
-              >
-                {nombrePlan}
-              </span>
-            </h1>
-            <p className="mt-1 text-lg font-medium text-slate-500">
-              {data?.carreras?.facultades?.nombre}{' '}
-              {data?.carreras?.nombre_corto}
-            </p>
+        {isLoading ? (
+          /* ===== SKELETON ===== */
+          <div className="mx-auto max-w-[1600px] p-8">
+            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <DatosGeneralesSkeleton key={i} />
+              ))}
+            </div>
          </div>
+        ) : (
+          <>
+            <div className="flex flex-col items-start justify-between gap-4 md:flex-row">
+              <div>
+                <h1 className="flex items-baseline gap-2 text-3xl font-bold tracking-tight text-slate-900">
+                  <span>{nivelPlan} en</span>
+                  <span
+                    role="textbox"
+                    tabIndex={0}
+                    contentEditable
+                    suppressContentEditableWarning
+                    spellCheck={false} // Quita el subrayado rojo de error ortográfico
+                    onKeyDown={handleKeyDown}
+                    onBlur={(e) =>
+                      setNombrePlan(e.currentTarget.textContent || '')
+                    }
+                    className="cursor-text border-b border-transparent decoration-transparent transition-colors outline-none select-text hover:border-slate-300 focus:border-teal-500"
+                    style={{
+                      WebkitTextDecoration: 'none',
+                      textDecoration: 'none',
+                    }} // Doble seguridad contra subrayados
+                  >
+                    {nombrePlan}
+                  </span>
+                </h1>
+                <p className="mt-1 text-lg font-medium text-slate-500">
+                  {data?.carreras?.facultades?.nombre}{' '}
+                  {data?.carreras?.nombre_corto}
+                </p>
+              </div>

-          <div className="flex gap-2">
-            {/* <Badge className="gap-1 border-teal-200 bg-teal-50 px-3 text-teal-700 hover:bg-teal-100">
+              <div className="flex gap-2">
+                {/* <Badge className="gap-1 border-teal-200 bg-teal-50 px-3 text-teal-700 hover:bg-teal-100">
              <CheckCircle2 size={12} /> {data?.estados_plan?.etiqueta}
            </Badge> */}
-            <Badge
-              className={`gap-1 border-teal-200 bg-teal-50 px-3 text-teal-700 hover:bg-teal-100`}
-            >
-              {data?.estados_plan?.etiqueta}
-            </Badge>
-          </div>
-        </div>
+                <Badge
+                  className={`gap-1 border-teal-200 bg-teal-50 px-3 text-teal-700 hover:bg-teal-100`}
+                >
+                  {data?.estados_plan?.etiqueta}
+                </Badge>
+              </div>
+            </div>
+          </>
+        )}

        {/* 3. Cards de Información con Context Menu */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
-          <ContextMenu>
-            <ContextMenuTrigger>
-              {/* Eliminamos el div extra y aplicamos el estilo directamente al trigger si es necesario, 
-          pero con asChild, la InfoCard será el trigger real */}
+          <DropdownMenu>
+            <DropdownMenuTrigger>
              <InfoCard
                icon={<GraduationCap className="text-slate-400" />}
                label="Nivel"
                value={nivelPlan}
                isEditable
              />
-            </ContextMenuTrigger>
-            <ContextMenuContent className="w-48">
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent className="w-48">
              {niveles.map((n) => (
-                <ContextMenuItem key={n} onClick={() => setNivelPlan(n)}>
+                <DropdownMenuItem
+                  key={n}
+                  onClick={() => {
+                    setNivelPlan(n)
+                    setIsDirty(true)
+                  }}
+                >
                  {n}
-                </ContextMenuItem>
+                </DropdownMenuItem>
              ))}
-            </ContextMenuContent>
-          </ContextMenu>
+            </DropdownMenuContent>
+          </DropdownMenu>

          <InfoCard
            icon={<Clock className="text-slate-400" />}
@@ -212,7 +236,7 @@ function InfoCard({
    <div
      className={`flex h-[72px] w-full items-center gap-4 rounded-xl border border-slate-200/60 bg-slate-50/50 p-4 shadow-sm transition-all ${
        isEditable
-          ? 'cursor-context-menu hover:border-teal-200 hover:bg-white'
+          ? 'cursor-pointer hover:border-teal-200 hover:bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500/40'
          : ''
      }`}
    >
@@ -253,3 +277,23 @@ function Tab({
    </Link>
  )
 }
+
+function DatosGeneralesSkeleton() {
+  return (
+    <div className="rounded-xl border bg-white">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b px-5 py-3">
+        <Skeleton className="h-4 w-40" />
+        <Skeleton className="h-8 w-16" />
+      </div>
+
+      {/* Content */}
+      <div className="space-y-3 p-5">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-11/12" />
+        <Skeleton className="h-4 w-10/12" />
+        <Skeleton className="h-4 w-9/12" />
+      </div>
+    </div>
+  )
+}
--- a/src/routes/planes/$planId/index.tsx
+++ b/src/routes/planes/$planId/index.tsx
@@ -3,7 +3,7 @@ import { createFileRoute, redirect } from '@tanstack/react-router'
 export const Route = createFileRoute('/planes/$planId/')({
  beforeLoad: ({ params }) => {
    throw redirect({
-      to: '/planes/$planId/datos',
+      to: '/planes/$planId/materias',
      params,
    })
  },