Wizard listo para enviar información a ai-generate-plan

2026-01-15 15:54:36 -06:00
parent b08d58e262
commit 9aad9aed00
14 changed files with 1199 additions and 1142 deletions
--- a/src/components/planes/wizard/PasoBasicosForm/PasoBasicosForm.tsx
+++ b/src/components/planes/wizard/PasoBasicosForm/PasoBasicosForm.tsx
@@ -1,7 +1,9 @@
-import { TemplateSelectorCard } from './TemplateSelectorCard'
-
-import type { NivelPlanEstudio, TipoCiclo } from '@/data/types/domain'
-import type { CARRERAS } from '@/features/planes/nuevo/catalogs'
+import type {
+  EstructuraPlanRow,
+  FacultadRow,
+  NivelPlanEstudio,
+  TipoCiclo,
+} from '@/data/types/domain'
 import type { NewPlanWizardState } from '@/features/planes/nuevo/types'

 import { Input } from '@/components/ui/input'
@@ -13,31 +15,23 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select'
-import { Separator } from '@/components/ui/separator'
 import { useCatalogosPlanes } from '@/data/hooks/usePlans'
-import {
-  FACULTADES,
-  NIVELES,
-  TIPOS_CICLO,
-  PLANTILLAS_ANEXO_1,
-  PLANTILLAS_ANEXO_2,
-} from '@/features/planes/nuevo/catalogs'
+import { NIVELES, TIPOS_CICLO } from '@/features/planes/nuevo/catalogs'
 import { cn } from '@/lib/utils'

 export function PasoBasicosForm({
  wizard,
  onChange,
-  carrerasFiltradas,
 }: {
  wizard: NewPlanWizardState
  onChange: React.Dispatch<React.SetStateAction<NewPlanWizardState>>
-  carrerasFiltradas: typeof CARRERAS
 }) {
  const { data: catalogos } = useCatalogosPlanes()

  // Preferir los catálogos remotos si están disponibles; si no, usar los locales
-  const facultadesList = catalogos?.facultades ?? FACULTADES
-  const rawCarreras = catalogos?.carreras ?? carrerasFiltradas
+  const facultadesList = catalogos?.facultades ?? []
+  const rawCarreras = catalogos?.carreras ?? []
+  const estructurasPlanList = catalogos?.estructurasPlan ?? []

  const filteredCarreras = rawCarreras.filter((c: any) => {
    const facId = wizard.datosBasicos.facultadId
@@ -57,10 +51,15 @@ export function PasoBasicosForm({
            placeholder="Ej. Ingeniería en Sistemas (2026)"
            value={wizard.datosBasicos.nombrePlan}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              onChange((w) => ({
-                ...w,
-                datosBasicos: { ...w.datosBasicos, nombrePlan: e.target.value },
-              }))
+              onChange(
+                (w): NewPlanWizardState => ({
+                  ...w,
+                  datosBasicos: {
+                    ...w.datosBasicos,
+                    nombrePlan: e.target.value,
+                  },
+                }),
+              )
            }
            className="placeholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
          />
@@ -71,14 +70,16 @@ export function PasoBasicosForm({
          <Select
            value={wizard.datosBasicos.facultadId}
            onValueChange={(value) =>
-              onChange((w) => ({
-                ...w,
-                datosBasicos: {
-                  ...w.datosBasicos,
-                  facultadId: value,
-                  carreraId: '',
-                },
-              }))
+              onChange(
+                (w): NewPlanWizardState => ({
+                  ...w,
+                  datosBasicos: {
+                    ...w.datosBasicos,
+                    facultadId: value,
+                    carreraId: '',
+                  },
+                }),
+              )
            }
          >
            <SelectTrigger
@@ -93,7 +94,7 @@ export function PasoBasicosForm({
              <SelectValue placeholder="Ej. Facultad de Ingeniería" />
            </SelectTrigger>
            <SelectContent>
-              {facultadesList.map((f: any) => (
+              {facultadesList.map((f: FacultadRow) => (
                <SelectItem key={f.id} value={f.id}>
                  {f.nombre}
                </SelectItem>
@@ -107,10 +108,12 @@ export function PasoBasicosForm({
          <Select
            value={wizard.datosBasicos.carreraId}
            onValueChange={(value) =>
-              onChange((w) => ({
-                ...w,
-                datosBasicos: { ...w.datosBasicos, carreraId: value },
-              }))
+              onChange(
+                (w): NewPlanWizardState => ({
+                  ...w,
+                  datosBasicos: { ...w.datosBasicos, carreraId: value },
+                }),
+              )
            }
            disabled={!wizard.datosBasicos.facultadId}
          >
@@ -174,13 +177,15 @@ export function PasoBasicosForm({
          <Select
            value={wizard.datosBasicos.tipoCiclo}
            onValueChange={(value: TipoCiclo) =>
-              onChange((w) => ({
-                ...w,
-                datosBasicos: {
-                  ...w.datosBasicos,
-                  tipoCiclo: value as any,
-                },
-              }))
+              onChange(
+                (w): NewPlanWizardState => ({
+                  ...w,
+                  datosBasicos: {
+                    ...w.datosBasicos,
+                    tipoCiclo: value as any,
+                  },
+                }),
+              )
            }
          >
            <SelectTrigger
@@ -212,22 +217,63 @@ export function PasoBasicosForm({
            min={1}
            value={wizard.datosBasicos.numCiclos ?? ''}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              onChange((w) => ({
-                ...w,
-                datosBasicos: {
-                  ...w.datosBasicos,
-                  // Keep undefined when the input is empty so the field stays optional
-                  numCiclos:
-                    e.target.value === '' ? undefined : Number(e.target.value),
-                },
-              }))
+              onChange(
+                (w): NewPlanWizardState => ({
+                  ...w,
+                  datosBasicos: {
+                    ...w.datosBasicos,
+                    // Keep undefined when the input is empty so the field stays optional
+                    numCiclos:
+                      e.target.value === ''
+                        ? undefined
+                        : Number(e.target.value),
+                  },
+                }),
+              )
            }
            className="placeholder:text-muted-foreground/70 font-medium not-italic placeholder:font-normal placeholder:italic"
            placeholder="Ej. 8"
          />
        </div>
+
+        <div className="grid gap-1">
+          <Label htmlFor="estructuraPlan">Estructura de plan de estudios</Label>
+          <Select
+            value={wizard.datosBasicos.estructuraPlanId ?? ''}
+            onValueChange={(value: string) =>
+              onChange(
+                (w): NewPlanWizardState => ({
+                  ...w,
+                  datosBasicos: {
+                    ...w.datosBasicos,
+                    estructuraPlanId: value,
+                  },
+                }),
+              )
+            }
+          >
+            <SelectTrigger
+              id="tipoCiclo"
+              className={cn(
+                'w-full min-w-0 [&>span]:block! [&>span]:truncate!',
+                !wizard.datosBasicos.estructuraPlanId
+                  ? 'text-muted-foreground font-normal italic opacity-70' // Es Placeholder
+                  : 'font-medium not-italic', // Tiene Valor (Medium)
+              )}
+            >
+              <SelectValue placeholder="Ej. Plan base SEP/ULSA (2026)" />
+            </SelectTrigger>
+            <SelectContent>
+              {estructurasPlanList.map((t: EstructuraPlanRow) => (
+                <SelectItem key={t.id} value={t.id}>
+                  {t.nombre}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
      </div>
-      <Separator className="my-3" />
+      {/* <Separator className="my-3" />
      <div className="grid gap-4 sm:grid-cols-2">
        <TemplateSelectorCard
          cardTitle="Plantilla de plan de estudios"
@@ -263,7 +309,7 @@ export function PasoBasicosForm({
            }))
          }
        />
-      </div>
+      </div> */}
    </div>
  )
 }
--- a/src/components/planes/wizard/PasoDetallesPanel/FileDropZone.tsx
+++ b/src/components/planes/wizard/PasoDetallesPanel/FileDropZone.tsx
@@ -2,13 +2,13 @@ import { Upload, File, X, FileText } from 'lucide-react'
 import { useState, useCallback, useEffect, useRef } from 'react'

 import { Button } from '@/components/ui/button'
+import { formatFileSize } from '@/features/planes/utils/format-file-size'
 import { cn } from '@/lib/utils'

-interface UploadedFile {
-  id: string
-  name: string
-  size: string
-  type: string
+export interface UploadedFile {
+  id: string // Necesario para React (key)
+  file: File // La fuente de verdad (contiene name, size, type)
+  preview?: string // Opcional: si fueran imágenes
 }

 interface FileDropzoneProps {
@@ -37,9 +37,7 @@ export function FileDropzone({
          typeof crypto !== 'undefined' && 'randomUUID' in crypto
            ? (crypto as any).randomUUID()
            : `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-        name: file.name,
-        size: formatFileSize(file.size),
-        type: file.name.split('.').pop() || 'file',
+        file,
      }))
      setFiles((prev) => {
        const room = Math.max(0, maxFiles - prev.length)
@@ -97,12 +95,6 @@ export function FileDropzone({
    if (onFilesChangeRef.current) onFilesChangeRef.current(files)
  }, [files])

-  const formatFileSize = (bytes: number): string => {
-    if (bytes < 1024) return bytes + ' B'
-    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
-    return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
-  }
-
  const getFileIcon = (type: string) => {
    switch (type.toLowerCase()) {
      case 'pdf':
@@ -170,23 +162,25 @@ export function FileDropzone({
      {/* Uploaded files list */}
      {files.length > 0 && (
        <div className="space-y-2">
-          {files.map((file) => (
+          {files.map((item) => (
            <div
-              key={file.id}
+              key={item.id}
              className="bg-accent/50 border-border fade-in flex items-center gap-3 rounded-lg border p-3"
            >
-              {getFileIcon(file.type)}
+              {getFileIcon(item.file.type)}
              <div className="min-w-0 flex-1">
                <p className="text-foreground truncate text-sm font-medium">
-                  {file.name}
+                  {item.file.name}
+                </p>
+                <p className="text-muted-foreground text-xs">
+                  {formatFileSize(item.file.size)}
                </p>
-                <p className="text-muted-foreground text-xs">{file.size}</p>
              </div>
              <Button
                variant="ghost"
                size="icon"
                className="text-muted-foreground hover:text-destructive h-8 w-8"
-                onClick={() => removeFile(file.id)}
+                onClick={() => removeFile(item.id)}
              >
                <X className="h-4 w-4" />
              </Button>
--- a/src/components/planes/wizard/PasoDetallesPanel/PasoDetallesPanel.tsx
+++ b/src/components/planes/wizard/PasoDetallesPanel/PasoDetallesPanel.tsx
@@ -1,6 +1,7 @@
 import { FileDropzone } from './FileDropZone'
 import ReferenciasParaIA from './ReferenciasParaIA'

+import type { UploadedFile } from './FileDropZone'
 import type { NewPlanWizardState } from '@/features/planes/nuevo/types'

 import { Button } from '@/components/ui/button'
@@ -116,14 +117,16 @@ export function PasoDetallesPanel({
              }
            })
          }
-          onFilesChange={(files) =>
-            onChange((w) => ({
-              ...w,
-              iaConfig: {
-                ...(w.iaConfig || ({} as any)),
-                archivosAdjuntos: files,
-              },
-            }))
+          onFilesChange={(files: Array<UploadedFile>) =>
+            onChange(
+              (w): NewPlanWizardState => ({
+                ...w,
+                iaConfig: {
+                  ...(w.iaConfig || ({} as any)),
+                  archivosAdjuntos: files,
+                },
+              }),
+            )
          }
        />
        <div className="flex items-center justify-between">
--- a/src/components/planes/wizard/PasoDetallesPanel/ReferenciasParaIA.tsx
+++ b/src/components/planes/wizard/PasoDetallesPanel/ReferenciasParaIA.tsx
@@ -5,6 +5,8 @@ import BarraBusqueda from '../../BarraBusqueda'

 import { FileDropzone } from './FileDropZone'

+import type { UploadedFile } from './FileDropZone'
+
 import { Checkbox } from '@/components/ui/checkbox'
 import { Label } from '@/components/ui/label'
 import {
@@ -27,9 +29,7 @@ const ReferenciasParaIA = ({
  selectedRepositorioIds?: Array<string>
  onToggleArchivo?: (id: string, checked: boolean) => void
  onToggleRepositorio?: (id: string, checked: boolean) => void
-  onFilesChange?: (
-    files: Array<{ id: string; name: string; size: string; type: string }>,
-  ) => void
+  onFilesChange?: (files: Array<UploadedFile>) => void
 }) => {
  const [busquedaArchivos, setBusquedaArchivos] = useState('')
  const [busquedaRepositorios, setBusquedaRepositorios] = useState('')
--- a/src/components/planes/wizard/PasoResumenCard.tsx
+++ b/src/components/planes/wizard/PasoResumenCard.tsx
@@ -8,12 +8,11 @@ import {
  CardTitle,
 } from '@/components/ui/card'
 import {
-  PLANTILLAS_ANEXO_1,
-  PLANTILLAS_ANEXO_2,
  PLANES_EXISTENTES,
  ARCHIVOS,
  REPOSITORIOS,
 } from '@/features/planes/nuevo/catalogs'
+import { formatFileSize } from '@/features/planes/utils/format-file-size'

 export function PasoResumenCard({ wizard }: { wizard: NewPlanWizardState }) {
  return (
@@ -32,12 +31,6 @@ export function PasoResumenCard({ wizard }: { wizard: NewPlanWizardState }) {
            const repositoriosRef =
              wizard.iaConfig?.repositoriosReferencia ?? []
            const adjuntos = wizard.iaConfig?.archivosAdjuntos ?? []
-            const plantillaPlan = PLANTILLAS_ANEXO_1.find(
-              (x) => x.id === wizard.datosBasicos.plantillaPlanId,
-            )
-            const plantillaMapa = PLANTILLAS_ANEXO_2.find(
-              (x) => x.id === wizard.datosBasicos.plantillaMapaId,
-            )
            const contenido = (
              <>
                <div>
@@ -68,89 +61,56 @@ export function PasoResumenCard({ wizard }: { wizard: NewPlanWizardState }) {
                    {wizard.datosBasicos.tipoCiclo})
                  </span>
                </div>
-                <div className="mt-2">
-                  <span className="text-muted-foreground">
-                    Plantilla plan:{' '}
-                  </span>
-                  <span className="font-medium">
-                    {(plantillaPlan?.name ||
-                      wizard.datosBasicos.plantillaPlanId ||
-                      '—') +
-                      ' · ' +
-                      (wizard.datosBasicos.plantillaPlanVersion || '—')}
-                  </span>
-                </div>
-                <div>
-                  <span className="text-muted-foreground">
-                    Mapa curricular:{' '}
-                  </span>
-                  <span className="font-medium">
-                    {(plantillaMapa?.name ||
-                      wizard.datosBasicos.plantillaMapaId ||
-                      '—') +
-                      ' · ' +
-                      (wizard.datosBasicos.plantillaMapaVersion || '—')}
-                  </span>
-                </div>
                <div className="mt-2">
                  <span className="text-muted-foreground">Modo: </span>
                  <span className="font-medium">
-                    {wizard.modoCreacion === 'MANUAL' && 'Manual'}
-                    {wizard.modoCreacion === 'IA' && 'Generado con IA'}
-                    {wizard.modoCreacion === 'CLONADO' &&
-                      wizard.subModoClonado === 'INTERNO' &&
+                    {wizard.tipoOrigen === 'MANUAL' && 'Manual'}
+                    {wizard.tipoOrigen === 'IA' && 'Generado con IA'}
+                    {wizard.tipoOrigen === 'CLONADO_INTERNO' &&
                      'Clonado desde plan del sistema'}
-                    {wizard.modoCreacion === 'CLONADO' &&
-                      wizard.subModoClonado === 'TRADICIONAL' &&
+                    {wizard.tipoOrigen === 'CLONADO_TRADICIONAL' &&
                      'Importado desde documentos tradicionales'}
                  </span>
                </div>
-                {wizard.modoCreacion === 'CLONADO' &&
-                  wizard.subModoClonado === 'INTERNO' && (
-                    <div className="mt-2">
-                      <span className="text-muted-foreground">
-                        Plan origen:{' '}
-                      </span>
-                      <span className="font-medium">
-                        {(() => {
-                          const p = PLANES_EXISTENTES.find(
-                            (x) => x.id === wizard.clonInterno?.planOrigenId,
-                          )
-                          return (
-                            p?.nombre || wizard.clonInterno?.planOrigenId || '—'
-                          )
-                        })()}
-                      </span>
-                    </div>
-                  )}
-                {wizard.modoCreacion === 'CLONADO' &&
-                  wizard.subModoClonado === 'TRADICIONAL' && (
-                    <div className="mt-2">
-                      <div className="font-medium">Documentos adjuntos</div>
-                      <ul className="text-muted-foreground list-disc pl-5 text-xs">
-                        <li>
-                          <span className="text-foreground">
-                            Word del plan:
-                          </span>{' '}
-                          {wizard.clonTradicional?.archivoWordPlanId?.name ||
-                            '—'}
-                        </li>
-                        <li>
-                          <span className="text-foreground">
-                            Mapa curricular:
-                          </span>{' '}
-                          {wizard.clonTradicional?.archivoMapaExcelId?.name ||
-                            '—'}
-                        </li>
-                        <li>
-                          <span className="text-foreground">Asignaturas:</span>{' '}
-                          {wizard.clonTradicional?.archivoAsignaturasExcelId
-                            ?.name || '—'}
-                        </li>
-                      </ul>
-                    </div>
-                  )}
-                {wizard.modoCreacion === 'IA' && (
+                {wizard.tipoOrigen === 'CLONADO_INTERNO' && (
+                  <div className="mt-2">
+                    <span className="text-muted-foreground">Plan origen: </span>
+                    <span className="font-medium">
+                      {(() => {
+                        const p = PLANES_EXISTENTES.find(
+                          (x) => x.id === wizard.clonInterno?.planOrigenId,
+                        )
+                        return (
+                          p?.nombre || wizard.clonInterno?.planOrigenId || '—'
+                        )
+                      })()}
+                    </span>
+                  </div>
+                )}
+                {wizard.tipoOrigen === 'CLONADO_TRADICIONAL' && (
+                  <div className="mt-2">
+                    <div className="font-medium">Documentos adjuntos</div>
+                    <ul className="text-muted-foreground list-disc pl-5 text-xs">
+                      <li>
+                        <span className="text-foreground">Word del plan:</span>{' '}
+                        {wizard.clonTradicional?.archivoWordPlanId?.name || '—'}
+                      </li>
+                      <li>
+                        <span className="text-foreground">
+                          Mapa curricular:
+                        </span>{' '}
+                        {wizard.clonTradicional?.archivoMapaExcelId?.name ||
+                          '—'}
+                      </li>
+                      <li>
+                        <span className="text-foreground">Asignaturas:</span>{' '}
+                        {wizard.clonTradicional?.archivoAsignaturasExcelId
+                          ?.name || '—'}
+                      </li>
+                    </ul>
+                  </div>
+                )}
+                {wizard.tipoOrigen === 'IA' && (
                  <div className="bg-muted/50 mt-2 rounded-md p-3">
                    <div>
                      <span className="text-muted-foreground">Enfoque: </span>
@@ -208,8 +168,10 @@ export function PasoResumenCard({ wizard }: { wizard: NewPlanWizardState }) {
                        <ul className="text-muted-foreground list-disc pl-5 text-xs">
                          {adjuntos.map((f) => (
                            <li key={f.id}>
-                              <span className="text-foreground">{f.name}</span>{' '}
-                              <span>· {f.size}</span>
+                              <span className="text-foreground">
+                                {f.file.name}
+                              </span>{' '}
+                              <span>· {formatFileSize(f.file.size)}</span>
                            </li>
                          ))}
                        </ul>