Guillermo.Arrieta/acad-ia-2
1
0
Fork 0
Code Issues 16 Pull Requests Actions Wiki Activity

Compare commits

base: Guillermo.Arrieta:4e00262ab09269ca4282435f2d6d642971634efb
Branches Tags
Guillermo.Arrieta:main Guillermo.Arrieta:issue/195-actualizar-esta-seccin-de-seriacin Guillermo.Arrieta:issue/182-funcionalidad-de-reacomodo-e-insercin-aleatoria-de Guillermo.Arrieta:issue/147-login-de-usuarios
..
compare: Guillermo.Arrieta:9d7201065a38fdafb7faeaa6b63c1a73727028c5
Branches Tags
Guillermo.Arrieta:main Guillermo.Arrieta:issue/195-actualizar-esta-seccin-de-seriacin Guillermo.Arrieta:issue/182-funcionalidad-de-reacomodo-e-insercin-aleatoria-de Guillermo.Arrieta:issue/147-login-de-usuarios

1 Commits
4e00262ab0 ... 9d7201065a

Author SHA1 Message Date
Guillermo Arrieta Medina
9d7201065a Fallback elegante de vista no encontrada 
close #44:
Se creó la NotFoundPage y se utiliza en __root con el notFoundComponent.
Se agregó la lógica del loader tanto de plan de estudios como de asignaturas.
Se agregó el NotFoundComponent para el detalle de plan de estudios y el de asignaturas
 2026-01-28 12:56:08 -06:00
12 changed files with 552 additions and 717 deletions
Expand all files Collapse all files

635
src/components/asignaturas/detalle/IAMateriaTab.tsx
View File

@@ -1,406 +1,357 @@
import { useRouterState } from '@tanstack/react-router' import { useState, useRef, useEffect } from 'react';
import { Send, Sparkles, Bot, User, Check, X, RefreshCw, Lightbulb, Wand2 } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import { import {
Sparkles, Command,
Send, CommandEmpty,
Target, CommandGroup,
UserCheck, CommandInput,
Lightbulb, CommandItem,
FileText, CommandList,
GraduationCap, } from '@/components/ui/command';
BookOpen, import type { IAMessage, IASugerencia, CampoEstructura } from '@/types/materia';
Check, import { cn } from '@/lib/utils';
X, //import { toast } from 'sonner';
} from 'lucide-react'
import { useState, useEffect, useRef, useMemo } from 'react'
import type { IAMessage, IASugerencia, CampoEstructura } from '@/types/materia'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Textarea } from '@/components/ui/textarea'
import { cn } from '@/lib/utils'
// Tipos importados de tu archivo de materia
const PRESETS = [
{
id: 'mejorar-objetivo',
label: 'Mejorar objetivo',
icon: Target,
prompt: 'Mejora la redacción del objetivo de esta asignatura...',
},
{
id: 'contenido-tematico',
label: 'Sugerir contenido',
icon: BookOpen,
prompt: 'Genera un desglose de temas para esta materia...',
},
{
id: 'actividades',
label: 'Actividades de aprendizaje',
icon: GraduationCap,
prompt: 'Sugiere actividades prácticas para los temas seleccionados...',
},
{
id: 'bibliografia',
label: 'Actualizar bibliografía',
icon: FileText,
prompt: 'Recomienda bibliografía reciente para esta asignatura...',
},
]
interface SelectedField {
key: string
label: string
value: string
}
interface IAMateriaTabProps { interface IAMateriaTabProps {
campos: Array<CampoEstructura> campos: CampoEstructura[];
datosGenerales: Record<string, any> datosGenerales: Record<string, any>;
messages: Array<IAMessage> messages: IAMessage[];
onSendMessage: (message: string, campoId?: string) => void onSendMessage: (message: string, campoId?: string) => void;
onAcceptSuggestion: (sugerencia: IASugerencia) => void onAcceptSuggestion: (sugerencia: IASugerencia) => void;
onRejectSuggestion: (messageId: string) => void onRejectSuggestion: (messageId: string) => void;
} }
export function IAMateriaTab({ const quickActions = [
campos, { id: 'mejorar-objetivos', label: 'Mejorar objetivos', icon: Wand2, prompt: 'Mejora el :objetivo_general para que sea más específico y medible' },
datosGenerales, { id: 'generar-contenido', label: 'Generar contenido temático', icon: Lightbulb, prompt: 'Sugiere un contenido temático completo basado en los objetivos y competencias' },
messages, { id: 'alinear-perfil', label: 'Alinear con perfil de egreso', icon: RefreshCw, prompt: 'Revisa las :competencias y alinéalas con el perfil de egreso del plan' },
onSendMessage, { id: 'ajustar-biblio', label: 'Recomendar bibliografía', icon: Sparkles, prompt: 'Recomienda bibliografía actualizada basándote en el contenido temático' },
onAcceptSuggestion, ];
onRejectSuggestion,
}: IAMateriaTabProps) {
const routerState = useRouterState()
// ESTADOS PRINCIPALES (Igual que en Planes) export function IAMateriaTab({ campos, datosGenerales, messages, onSendMessage, onAcceptSuggestion, onRejectSuggestion }: IAMateriaTabProps) {
const [input, setInput] = useState('') const [input, setInput] = useState('');
const [selectedFields, setSelectedFields] = useState<Array<SelectedField>>([]) const [isLoading, setIsLoading] = useState(false);
const [showSuggestions, setShowSuggestions] = useState(false) const [showFieldSelector, setShowFieldSelector] = useState(false);
const [isLoading, setIsLoading] = useState(false) const [fieldSelectorPosition, setFieldSelectorPosition] = useState({ top: 0, left: 0 });
const scrollRef = useRef<HTMLDivElement>(null) const [cursorPosition, setCursorPosition] = useState(0);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const scrollRef = useRef<HTMLDivElement>(null);
// 1. Transformar datos de la materia para el menú
const availableFields = useMemo(() => {
// Extraemos las claves directamente del objeto datosGenerales
// ["nombre", "descripcion", "perfil_de_egreso", "fines_de_aprendizaje_o_formacion"]
return Object.keys(datosGenerales).map((key) => {
// Buscamos si existe un nombre amigable en la estructura de campos
const estructuraCampo = campos.find((c) => c.id === key)
// Si existe en 'campos', usamos su nombre; si no, formateamos la clave (ej: perfil_de_egreso -> Perfil De Egreso)
const labelAmigable =
estructuraCampo?.nombre ||
key.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
return {
key: key,
label: labelAmigable,
value: String(datosGenerales[key] || ''),
}
})
}, [campos, datosGenerales])
// 2. Manejar el estado inicial si viene de "Datos de Materia" (Prefill)
useEffect(() => {
const state = routerState.location.state as any
if (state?.prefillCampo && availableFields.length > 0) {
const field = availableFields.find((f) => f.key === state.prefillCampo)
if (field && !selectedFields.find((sf) => sf.key === field.key)) {
setSelectedFields([field])
// Sincronizamos el texto inicial con el campo pre-seleccionado
setInput(`Mejora el campo ${field.key}: `)
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [availableFields])
// Scroll automático
useEffect(() => { useEffect(() => {
if (scrollRef.current) { if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
} }
}, [messages, isLoading]) }, [messages]);
// 3. Lógica para el disparador ":"
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const val = e.target.value const value = e.target.value;
setInput(val) const pos = e.target.selectionStart;
setShowSuggestions(val.endsWith(':')) setInput(value);
setCursorPosition(pos);
// Check for : character to trigger field selector
const lastChar = value.charAt(pos - 1);
if (lastChar === ':') {
const rect = textareaRef.current?.getBoundingClientRect();
if (rect) {
setFieldSelectorPosition({ top: rect.bottom + 8, left: rect.left });
setShowFieldSelector(true);
} }
} else if (showFieldSelector && (lastChar === ' ' || !value.includes(':'))) {
const toggleField = (field: SelectedField) => { setShowFieldSelector(false);
setSelectedFields((prev) => {
const isSelected = prev.find((f) => f.key === field.key)
// Si lo estamos seleccionando (no estaba antes)
if (!isSelected) {
// Actualizamos el texto del input:
// Si termina en ":", lo reemplazamos por el key para que sea "Mejora perfil_de_egreso "
// Si no, simplemente lo añadimos al final.
setInput((prevText) => {
const [beforeColon, afterColon = ''] = prevText.split(':')
// Campos ya escritos después de :
const existingKeys = afterColon
.split(',')
.map((k) => k.trim())
.filter(Boolean)
// Si ya existe, no lo volvemos a agregar
if (existingKeys.includes(field.key)) {
return prevText
} }
};
const updatedKeys = [...existingKeys, field.key].join(', ') const insertFieldMention = (campoId: string) => {
const beforeCursor = input.slice(0, cursorPosition);
const afterCursor = input.slice(cursorPosition);
const lastColonIndex = beforeCursor.lastIndexOf(':');
const newInput = beforeCursor.slice(0, lastColonIndex) + `:${campoId}` + afterCursor;
setInput(newInput);
setShowFieldSelector(false);
textareaRef.current?.focus();
};
return `${beforeColon.trim()}: ${updatedKeys} ` const handleSend = async () => {
}) if (!input.trim() || isLoading) return;
return [field] // Extract field mention if any
} const fieldMatch = input.match(/:(\w+)/);
const campoId = fieldMatch ? fieldMatch[1] : undefined;
// Si lo estamos deseleccionando, solo quitamos el tag
return prev.filter((f) => f.key !== field.key) setIsLoading(true);
}) onSendMessage(input, campoId);
setShowSuggestions(false) setInput('');
}
// Simulate AI response delay
const buildPrompt = (userInput: string) => { setTimeout(() => {
if (selectedFields.length === 0) return userInput setIsLoading(false);
const fieldsText = selectedFields }, 1500);
.map((f) => `- ${f.label}: ${f.value || '(vacio)'}`) };
.join('\n')
const handleQuickAction = (prompt: string) => {
return `${userInput}\n\nCampos a analizar:\n${fieldsText}`.trim() setInput(prompt);
} textareaRef.current?.focus();
};
const handleSend = async (promptOverride?: string) => {
const rawText = promptOverride || input const renderMessageContent = (content: string) => {
if (!rawText.trim() && selectedFields.length === 0) return // Render field mentions as styled badges
return content.split(/(:[\w_]+)/g).map((part, i) => {
const finalPrompt = buildPrompt(rawText) if (part.startsWith(':')) {
const campo = campos.find(c => c.id === part.slice(1));
setIsLoading(true) return (
// Llamamos a la función que viene por props <span key={i} className="field-mention mx-0.5">
onSendMessage(finalPrompt, selectedFields[0]?.key) {campo?.nombre || part}
</span>
setInput('') );
setSelectedFields([])
// Simular carga local para el feedback visual
setTimeout(() => setIsLoading(false), 1200)
} }
return part;
});
};
return ( return (
<div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4"> <div className="space-y-6 animate-fade-in">
{/* PANEL DE CHAT PRINCIPAL */} <div className="flex items-center justify-between">
<div className="relative flex min-w-0 flex-[3] flex-col overflow-hidden rounded-xl border border-slate-200 bg-slate-50/50 shadow-sm"> <div>
{/* Barra superior */} <h2 className="font-display text-2xl font-semibold text-foreground flex items-center gap-2">
<div className="shrink-0 border-b bg-white p-3"> <Sparkles className="w-6 h-6 text-accent" />
<div className="flex flex-wrap items-center gap-2"> IA de la materia
<span className="text-[10px] font-bold tracking-wider text-slate-400 uppercase"> </h2>
IA de Asignatura <p className="text-sm text-muted-foreground mt-1">
</span> Usa <kbd className="px-1.5 py-0.5 bg-muted rounded text-xs font-mono">:</kbd> para mencionar campos específicos
</div>
</div>
{/* CONTENIDO DEL CHAT */}
<div className="relative min-h-0 flex-1">
<ScrollArea ref={scrollRef} className="h-full w-full">
<div className="mx-auto max-w-3xl space-y-6 p-6">
{messages.map((msg) => (
<div
key={msg.id}
className={`flex ${msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'} items-start gap-3`}
>
<Avatar
className={`h-8 w-8 shrink-0 border ${msg.role === 'assistant' ? 'bg-teal-50' : 'bg-slate-200'}`}
>
<AvatarFallback className="text-[10px]">
{msg.role === 'assistant' ? (
<Sparkles size={14} className="text-teal-600" />
) : (
<UserCheck size={14} />
)}
</AvatarFallback>
</Avatar>
<div
className={`flex max-w-[85%] flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}
>
<div
className={cn(
'rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm',
msg.role === 'user'
? 'rounded-tr-none bg-teal-600 text-white'
: 'rounded-tl-none border bg-white text-slate-700',
)}
>
{msg.content}
</div>
{/* Renderizado de Sugerencias (Homologado con lógica de Materia) */}
{msg.sugerencia && !msg.sugerencia.aceptada && (
<div className="animate-in fade-in slide-in-from-top-1 mt-3 w-full">
<div className="rounded-xl border border-teal-100 bg-white p-4 shadow-md">
<p className="mb-2 text-[10px] font-bold text-slate-400 uppercase">
Propuesta para: {msg.sugerencia.campoNombre}
</p> </p>
<div className="mb-4 max-h-40 overflow-y-auto rounded-lg bg-slate-50 p-3 text-xs text-slate-600 italic">
{msg.sugerencia.valorSugerido}
</div> </div>
<div className="flex gap-2"> </div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Chat area */}
<Card className="lg:col-span-2 card-elevated flex flex-col h-[600px]">
<CardHeader className="pb-2 border-b">
<CardTitle className="text-sm font-medium text-muted-foreground">
Conversación
</CardTitle>
</CardHeader>
<CardContent className="flex-1 flex flex-col p-0">
<ScrollArea className="flex-1 p-4" ref={scrollRef}>
<div className="space-y-4">
{messages.length === 0 ? (
<div className="text-center py-12">
<Bot className="w-12 h-12 mx-auto text-muted-foreground/50 mb-4" />
<p className="text-muted-foreground">
Inicia una conversación para mejorar tu materia con IA
</p>
</div>
) : (
messages.map((message) => (
<div key={message.id} className={cn(
"flex gap-3",
message.role === 'user' ? "justify-end" : "justify-start"
)}>
{message.role === 'assistant' && (
<div className="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
<Bot className="w-4 h-4 text-accent" />
</div>
)}
<div className={cn(
"max-w-[80%] rounded-lg px-4 py-3",
message.role === 'user'
? "bg-primary text-primary-foreground"
: "bg-muted"
)}>
<p className="text-sm whitespace-pre-wrap">
{renderMessageContent(message.content)}
</p>
{message.sugerencia && !message.sugerencia.aceptada && (
<div className="mt-3 p-3 bg-background/80 rounded-md border">
<p className="text-xs font-medium text-muted-foreground mb-2">
Sugerencia para: {message.sugerencia.campoNombre}
</p>
<div className="text-sm text-foreground bg-accent/10 p-2 rounded mb-3 max-h-32 overflow-y-auto">
{message.sugerencia.valorSugerido}
</div>
<div className="flex items-center gap-2">
<Button <Button
size="sm" size="sm"
onClick={() => onClick={() => onAcceptSuggestion(message.sugerencia!)}
onAcceptSuggestion(msg.sugerencia!) className="bg-success hover:bg-success/90 text-success-foreground"
}
className="h-8 bg-teal-600 text-xs hover:bg-teal-700"
> >
<Check size={14} className="mr-1" /> Aplicar <Check className="w-3 h-3 mr-1" />
Aplicar
</Button> </Button>
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
onClick={() => onRejectSuggestion(msg.id)} onClick={() => onRejectSuggestion(message.id)}
className="h-8 text-xs"
> >
<X size={14} className="mr-1" /> Descartar <X className="w-3 h-3 mr-1" />
Rechazar
</Button> </Button>
</div> </div>
</div> </div>
</div>
)} )}
{msg.sugerencia?.aceptada && ( {message.sugerencia?.aceptada && (
<Badge className="mt-2 border-teal-200 bg-teal-100 text-teal-700 hover:bg-teal-100"> <Badge className="mt-2 badge-library">
<Check className="mr-1 h-3 w-3" /> Sugerencia aplicada <Check className="w-3 h-3 mr-1" />
Sugerencia aplicada
</Badge> </Badge>
)} )}
</div> </div>
{message.role === 'user' && (
<div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
<User className="w-4 h-4 text-primary-foreground" />
</div> </div>
))} )}
</div>
))
)}
{isLoading && ( {isLoading && (
<div className="flex gap-2 p-4"> <div className="flex gap-3">
<div className="h-2 w-2 animate-bounce rounded-full bg-teal-400" /> <div className="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
<div className="h-2 w-2 animate-bounce rounded-full bg-teal-400 [animation-delay:0.2s]" /> <Bot className="w-4 h-4 text-accent animate-pulse" />
<div className="h-2 w-2 animate-bounce rounded-full bg-teal-400 [animation-delay:0.4s]" /> </div>
<div className="bg-muted rounded-lg px-4 py-3">
<div className="flex items-center gap-1">
<div className="w-2 h-2 bg-accent rounded-full animate-bounce [animation-delay:-0.3s]" />
<div className="w-2 h-2 bg-accent rounded-full animate-bounce [animation-delay:-0.15s]" />
<div className="w-2 h-2 bg-accent rounded-full animate-bounce" />
</div>
</div>
</div> </div>
)} )}
</div> </div>
</ScrollArea> </ScrollArea>
</div>
{/* INPUT FIJO AL FONDO */} {/* Input area */}
<div className="shrink-0 border-t bg-white p-4"> <div className="p-4 border-t">
<div className="relative mx-auto max-w-4xl"> <div className="relative">
{/* MENÚ DE SUGERENCIAS FLOTANTE */}
{showSuggestions && (
<div className="animate-in slide-in-from-bottom-2 absolute bottom-full z-50 mb-2 w-72 overflow-hidden rounded-xl border bg-white shadow-2xl">
<div className="border-b bg-slate-50 px-3 py-2 text-[10px] font-bold tracking-wider text-slate-500 uppercase">
Seleccionar campo de materia
</div>
<div className="max-h-64 overflow-y-auto p-1">
{availableFields.map((field) => (
<button
key={field.key}
onClick={() => toggleField(field)}
className="group flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-teal-50"
>
<span className="text-slate-700 group-hover:text-teal-700">
{field.label}
</span>
{selectedFields.find((f) => f.key === field.key) && (
<Check size={14} className="text-teal-600" />
)}
</button>
))}
</div>
</div>
)}
{/* CONTENEDOR DEL INPUT */}
<div className="flex flex-col gap-2 rounded-xl border bg-slate-50 p-2 transition-all focus-within:bg-white focus-within:ring-1 focus-within:ring-teal-500">
{/* Visualización de Tags */}
{selectedFields.length > 0 && (
<div className="flex flex-wrap gap-2 px-2 pt-1">
{selectedFields.map((field) => (
<div
key={field.key}
className="animate-in zoom-in-95 flex items-center gap-1 rounded-md border border-teal-200 bg-teal-100 px-2 py-0.5 text-[11px] font-semibold text-teal-800"
>
<span className="opacity-70">Campo:</span> {field.label}
<button
onClick={() => toggleField(field)}
className="ml-1 rounded-full p-0.5 transition-colors hover:bg-teal-200"
>
<X size={10} />
</button>
</div>
))}
</div>
)}
<div className="flex items-end gap-2">
<Textarea <Textarea
ref={textareaRef}
value={input} value={input}
onChange={handleInputChange} onChange={handleInputChange}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault() e.preventDefault();
handleSend() handleSend();
} }
}} }}
placeholder={ placeholder="Escribe tu mensaje... Usa : para mencionar campos"
selectedFields.length > 0 className="min-h-[80px] pr-12 resize-none"
? 'Instrucciones para los campos seleccionados...' disabled={isLoading}
: 'Escribe tu solicitud o ":" para campos...'
}
className="max-h-[120px] min-h-[40px] flex-1 resize-none border-none bg-transparent py-2 text-sm shadow-none focus-visible:ring-0"
/> />
<Button <Button
onClick={() => handleSend()} size="sm"
disabled={ onClick={handleSend}
(!input.trim() && selectedFields.length === 0) || isLoading disabled={!input.trim() || isLoading}
} className="absolute bottom-3 right-3 h-8 w-8 p-0"
size="icon"
className="mb-1 h-9 w-9 shrink-0 bg-teal-600 hover:bg-teal-700"
> >
<Send size={16} className="text-white" /> <Send className="w-4 h-4" />
</Button> </Button>
</div> </div>
</div>
</div>
</div>
</div>
{/* PANEL LATERAL (ACCIONES RÁPIDAS) */} {/* Field selector popover */}
<div className="flex flex-[1] flex-col gap-4 overflow-y-auto pr-2"> {showFieldSelector && (
<h4 className="flex items-center gap-2 text-left text-sm font-bold text-slate-800"> <div className="absolute z-50 mt-1 w-64 bg-popover border rounded-lg shadow-lg">
<Lightbulb size={18} className="text-orange-500" /> Acciones rápidas <Command>
</h4> <CommandInput placeholder="Buscar campo..." />
<div className="space-y-2"> <CommandList>
{PRESETS.map((preset) => ( <CommandEmpty>No se encontró el campo</CommandEmpty>
<button <CommandGroup heading="Campos disponibles">
key={preset.id} {campos.map((campo) => (
onClick={() => handleSend(preset.prompt)} <CommandItem
className="group flex w-full items-center gap-3 rounded-xl border bg-white p-3 text-left text-sm shadow-sm transition-all hover:border-teal-500 hover:bg-teal-50" key={campo.id}
value={campo.id}
onSelect={() => insertFieldMention(campo.id)}
className="cursor-pointer"
> >
<div className="rounded-lg bg-slate-100 p-2 text-slate-500 group-hover:bg-teal-100 group-hover:text-teal-600"> <span className="font-mono text-xs text-accent mr-2">
<preset.icon size={16} /> :{campo.id}
</div>
<span className="leading-tight font-medium text-slate-700">
{preset.label}
</span> </span>
</button> <span>{campo.nombre}</span>
</CommandItem>
))} ))}
</CommandGroup>
</CommandList>
</Command>
</div>
)}
</div>
</CardContent>
</Card>
{/* Sidebar with quick actions and fields */}
<div className="space-y-4">
{/* Quick actions */}
<Card className="card-elevated">
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Acciones rápidas</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{quickActions.map((action) => {
const Icon = action.icon;
return (
<Button
key={action.id}
variant="outline"
className="w-full justify-start text-left h-auto py-3"
onClick={() => handleQuickAction(action.prompt)}
>
<Icon className="w-4 h-4 mr-2 text-accent flex-shrink-0" />
<span className="text-sm">{action.label}</span>
</Button>
);
})}
</CardContent>
</Card>
{/* Available fields */}
<Card className="card-elevated">
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Campos de la materia</CardTitle>
</CardHeader>
<CardContent>
<ScrollArea className="h-[280px]">
<div className="space-y-2">
{campos.map((campo) => {
const hasValue = !!datosGenerales[campo.id];
return (
<div
key={campo.id}
className={cn(
"p-2 rounded-md border cursor-pointer transition-colors hover:bg-muted/50",
hasValue ? "border-success/30" : "border-warning/30"
)}
onClick={() => {
setInput(prev => prev + `:${campo.id} `);
textareaRef.current?.focus();
}}
>
<div className="flex items-center justify-between">
<span className="text-xs font-mono text-accent">:{campo.id}</span>
{hasValue ? (
<Badge variant="outline" className="text-xs text-success border-success/30">
Completo
</Badge>
) : (
<Badge variant="outline" className="text-xs text-warning border-warning/30">
Vacío
</Badge>
)}
</div>
<p className="text-sm text-foreground mt-1">{campo.nombre}</p>
</div>
);
})}
</div>
</ScrollArea>
</CardContent>
</Card>
</div> </div>
</div> </div>
</div> </div>
) );
} }

111
src/components/asignaturas/detalle/MateriaDetailPage.tsx
View File

@@ -1,7 +1,6 @@
import { import {
createFileRoute, createFileRoute,
Link, Link,
useNavigate,
useParams, useParams,
useRouterState, useRouterState,
} from '@tanstack/react-router' } from '@tanstack/react-router'
@@ -60,35 +59,14 @@ function EditableHeaderField({
onSave: (val: string) => void onSave: (val: string) => void
className?: string className?: string
}) { }) {
const textValue = String(value)
// Manejador para cuando el usuario termina de editar (pierde el foco)
const handleBlur = (e: React.FocusEvent<HTMLSpanElement>) => {
const newValue = e.currentTarget.innerText
if (newValue !== textValue) {
onSave(newValue)
}
}
const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
if (e.key === 'Enter') {
e.preventDefault()
e.currentTarget.blur() // Forzamos el guardado al presionar Enter
}
}
return ( return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions <input
<span type="text"
contentEditable value={String(value)}
suppressContentEditableWarning={true} // Evita el warning de React por tener hijos y contentEditable onChange={(e) => onSave(e.target.value)}
spellCheck={false} onBlur={(e) => onSave(e.target.value)}
onBlur={handleBlur} 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 ?? ''} `}
onKeyDown={handleKeyDown} />
className={`inline-block cursor-text rounded-sm px-1 transition-all hover:bg-white/10 focus:bg-white/20 focus:ring-2 focus:ring-blue-400/50 focus:outline-none ${className ?? ''} `}
>
{textValue}
</span>
) )
} }
@@ -113,7 +91,6 @@ export default function MateriaDetailPage() {
const [messages, setMessages] = useState<Array<IAMessage>>([]) const [messages, setMessages] = useState<Array<IAMessage>>([])
const [datosGenerales, setDatosGenerales] = useState({}) const [datosGenerales, setDatosGenerales] = useState({})
const [campos, setCampos] = useState<Array<CampoEstructura>>([]) const [campos, setCampos] = useState<Array<CampoEstructura>>([])
const [activeTab, setActiveTab] = useState('datos')
// Dentro de MateriaDetailPage // Dentro de MateriaDetailPage
const [headerData, setHeaderData] = useState({ const [headerData, setHeaderData] = useState({
@@ -123,13 +100,6 @@ export default function MateriaDetailPage() {
ciclo: 0, 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 // Sincronizar cuando llegue la API
useEffect(() => { useEffect(() => {
if (asignaturasApi) { if (asignaturasApi) {
@@ -211,7 +181,7 @@ export default function MateriaDetailPage() {
<section className="bg-gradient-to-b from-[#0b1d3a] to-[#0e2a5c] text-white"> <section className="bg-gradient-to-b from-[#0b1d3a] to-[#0e2a5c] text-white">
<div className="mx-auto max-w-7xl px-6 py-10"> <div className="mx-auto max-w-7xl px-6 py-10">
<Link <Link
to="/planes/$planId/materias" to="/planes/$planId"
params={{ planId }} params={{ planId }}
className="mb-4 flex items-center gap-2 text-sm text-blue-200 hover:text-white" className="mb-4 flex items-center gap-2 text-sm text-blue-200 hover:text-white"
> >
@@ -238,23 +208,11 @@ export default function MateriaDetailPage() {
<div className="flex flex-wrap gap-4 text-sm text-blue-200"> <div className="flex flex-wrap gap-4 text-sm text-blue-200">
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<GraduationCap className="h-4 w-4 shrink-0" /> <GraduationCap className="h-4 w-4" />
{/* Eliminamos el max-w y dejamos que el flex-wrap haga su trabajo */} {asignaturasApi?.planes_estudio?.datos?.nombre}
<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>
<span className="flex items-center gap-1"> <span>
<EditableHeaderField {asignaturasApi?.planes_estudio?.carreras?.facultades?.nombre}
value={
asignaturasApi?.planes_estudio?.carreras?.facultades
?.nombre || ''
}
onSave={(val) => handleUpdateHeader('facultad_nombre', val)}
className="min-w-[10ch] text-blue-100"
/>
</span> </span>
</div> </div>
@@ -300,11 +258,7 @@ export default function MateriaDetailPage() {
{/* ================= TABS ================= */} {/* ================= TABS ================= */}
<section className="border-b bg-white"> <section className="border-b bg-white">
<div className="mx-auto max-w-7xl px-6"> <div className="mx-auto max-w-7xl px-6">
<Tabs <Tabs defaultValue="datos">
value={activeTab}
onValueChange={setActiveTab}
className="w-full"
>
<TabsList className="h-auto gap-6 bg-transparent p-0"> <TabsList className="h-auto gap-6 bg-transparent p-0">
<TabsTrigger value="datos">Datos generales</TabsTrigger> <TabsTrigger value="datos">Datos generales</TabsTrigger>
<TabsTrigger value="contenido">Contenido temático</TabsTrigger> <TabsTrigger value="contenido">Contenido temático</TabsTrigger>
@@ -318,11 +272,7 @@ export default function MateriaDetailPage() {
{/* ================= TAB: DATOS GENERALES ================= */} {/* ================= TAB: DATOS GENERALES ================= */}
<TabsContent value="datos"> <TabsContent value="datos">
<DatosGenerales <DatosGenerales data={datosGenerales} isLoading={loadingAsig} />
data={datosGenerales}
isLoading={loadingAsig}
asignaturaId={asignaturaId}
/>
</TabsContent> </TabsContent>
<TabsContent value="contenido"> <TabsContent value="contenido">
@@ -380,15 +330,10 @@ export default function MateriaDetailPage() {
/* ================= TAB CONTENT ================= */ /* ================= TAB CONTENT ================= */
interface DatosGeneralesProps { interface DatosGeneralesProps {
asignaturaId: string
data: AsignaturaDatos data: AsignaturaDatos
isLoading: boolean isLoading: boolean
} }
function DatosGenerales({ function DatosGenerales({ data, isLoading }: DatosGeneralesProps) {
data,
isLoading,
asignaturaId,
}: DatosGeneralesProps) {
const formatTitle = (key: string): string => const formatTitle = (key: string): string =>
key.replace(/_/g, ' ').replace(/\b\w/g, (l: string) => l.toUpperCase()) key.replace(/_/g, ' ').replace(/\b\w/g, (l: string) => l.toUpperCase())
@@ -415,9 +360,7 @@ function DatosGenerales({
{!isLoading && {!isLoading &&
Object.entries(data).map(([key, value]) => ( Object.entries(data).map(([key, value]) => (
<InfoCard <InfoCard
asignaturaId={asignaturaId}
key={key} key={key}
clave={key}
title={formatTitle(key)} title={formatTitle(key)}
initialContent={value} initialContent={value}
onEnhanceAI={(contenido) => { onEnhanceAI={(contenido) => {
@@ -468,8 +411,6 @@ function DatosGenerales({
} }
interface InfoCardProps { interface InfoCardProps {
asignaturaId?: string
clave: string
title: string title: string
initialContent: any initialContent: any
type?: 'text' | 'requirements' | 'evaluation' type?: 'text' | 'requirements' | 'evaluation'
@@ -477,8 +418,6 @@ interface InfoCardProps {
} }
function InfoCard({ function InfoCard({
asignaturaId,
clave,
title, title,
initialContent, initialContent,
type = 'text', type = 'text',
@@ -489,27 +428,11 @@ function InfoCard({
const [tempText, setTempText] = useState( const [tempText, setTempText] = useState(
type === 'text' ? initialContent : JSON.stringify(initialContent, null, 2), type === 'text' ? initialContent : JSON.stringify(initialContent, null, 2),
) )
const navigate = useNavigate()
const handleSave = () => { const handleSave = () => {
setData(tempText) setData(tempText)
setIsEditing(false) 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 ( return (
<Card className="transition-all hover:border-slate-300"> <Card className="transition-all hover:border-slate-300">
@@ -525,7 +448,7 @@ function InfoCard({
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-8 w-8 text-blue-500 hover:bg-blue-50 hover:text-blue-600" className="h-8 w-8 text-blue-500 hover:bg-blue-50 hover:text-blue-600"
onClick={() => handleIARequest(clave)} // Enviamos la data actual a la IA onClick={() => onEnhanceAI?.(data)} // Enviamos la data actual a la IA
title="Mejorar con IA" title="Mejorar con IA"
> >
<Sparkles className="h-4 w-4" /> <Sparkles className="h-4 w-4" />

2
src/data/api/plans.api.ts
View File

@@ -181,7 +181,7 @@ export async function plans_history(planId: UUID): Promise<Array<CambioPlan>> {
const { data, error } = await supabase const { data, error } = await supabase
.from('cambios_plan') .from('cambios_plan')
.select( .select(
'id,plan_estudio_id,cambiado_por,cambiado_en,tipo,campo,valor_anterior,valor_nuevo', 'id,plan_estudio_id,cambiado_por,cambiado_en,tipo,campo,valor_anterior,valor_nuevo,interaccion_ia_id',
) )
.eq('plan_estudio_id', planId) .eq('plan_estudio_id', planId)
.order('cambiado_en', { ascending: false }) .order('cambiado_en', { ascending: false })

65
src/routeTree.gen.ts
View File

@@ -14,17 +14,18 @@ import { Route as DashboardRouteImport } from './routes/dashboard'
import { Route as IndexRouteImport } from './routes/index' import { Route as IndexRouteImport } from './routes/index'
import { Route as DemoTanstackQueryRouteImport } from './routes/demo/tanstack-query' import { Route as DemoTanstackQueryRouteImport } from './routes/demo/tanstack-query'
import { Route as PlanesListaRouteRouteImport } from './routes/planes/_lista/route' import { Route as PlanesListaRouteRouteImport } from './routes/planes/_lista/route'
import { Route as PlanesPlanIdIndexRouteImport } from './routes/planes/$planId/index'
import { Route as PlanesListaNuevoRouteImport } from './routes/planes/_lista/nuevo' import { Route as PlanesListaNuevoRouteImport } from './routes/planes/_lista/nuevo'
import { Route as PlanesPlanIdAsignaturasRouteRouteImport } from './routes/planes/$planId/asignaturas/route' import { Route as PlanesPlanIdAsignaturasRouteRouteImport } from './routes/planes/$planId/asignaturas/route'
import { Route as PlanesPlanIdDetalleRouteRouteImport } from './routes/planes/$planId/_detalle/route' import { Route as PlanesPlanIdDetalleRouteRouteImport } from './routes/planes/$planId/_detalle/route'
import { Route as PlanesPlanIdAsignaturasIndexRouteImport } from './routes/planes/$planId/asignaturas/index' import { Route as PlanesPlanIdAsignaturasIndexRouteImport } from './routes/planes/$planId/asignaturas/index'
import { Route as PlanesPlanIdDetalleIndexRouteImport } from './routes/planes/$planId/_detalle/index'
import { Route as PlanesPlanIdDetalleMateriasRouteImport } from './routes/planes/$planId/_detalle/materias' import { Route as PlanesPlanIdDetalleMateriasRouteImport } from './routes/planes/$planId/_detalle/materias'
import { Route as PlanesPlanIdDetalleMapaRouteImport } from './routes/planes/$planId/_detalle/mapa' import { Route as PlanesPlanIdDetalleMapaRouteImport } from './routes/planes/$planId/_detalle/mapa'
import { Route as PlanesPlanIdDetalleIaplanRouteImport } from './routes/planes/$planId/_detalle/iaplan' import { Route as PlanesPlanIdDetalleIaplanRouteImport } from './routes/planes/$planId/_detalle/iaplan'
import { Route as PlanesPlanIdDetalleHistorialRouteImport } from './routes/planes/$planId/_detalle/historial' import { Route as PlanesPlanIdDetalleHistorialRouteImport } from './routes/planes/$planId/_detalle/historial'
import { Route as PlanesPlanIdDetalleFlujoRouteImport } from './routes/planes/$planId/_detalle/flujo' import { Route as PlanesPlanIdDetalleFlujoRouteImport } from './routes/planes/$planId/_detalle/flujo'
import { Route as PlanesPlanIdDetalleDocumentoRouteImport } from './routes/planes/$planId/_detalle/documento' import { Route as PlanesPlanIdDetalleDocumentoRouteImport } from './routes/planes/$planId/_detalle/documento'
import { Route as PlanesPlanIdDetalleDatosRouteImport } from './routes/planes/$planId/_detalle/datos'
import { Route as PlanesPlanIdAsignaturasListaRouteRouteImport } from './routes/planes/$planId/asignaturas/_lista/route' import { Route as PlanesPlanIdAsignaturasListaRouteRouteImport } from './routes/planes/$planId/asignaturas/_lista/route'
import { Route as PlanesPlanIdAsignaturasAsignaturaIdRouteRouteImport } from './routes/planes/$planId/asignaturas/$asignaturaId/route' import { Route as PlanesPlanIdAsignaturasAsignaturaIdRouteRouteImport } from './routes/planes/$planId/asignaturas/$asignaturaId/route'
import { Route as PlanesPlanIdAsignaturasListaNuevaRouteImport } from './routes/planes/$planId/asignaturas/_lista/nueva' import { Route as PlanesPlanIdAsignaturasListaNuevaRouteImport } from './routes/planes/$planId/asignaturas/_lista/nueva'
@@ -54,6 +55,11 @@ const PlanesListaRouteRoute = PlanesListaRouteRouteImport.update({
path: '/planes', path: '/planes',
getParentRoute: () => rootRouteImport, getParentRoute: () => rootRouteImport,
} as any) } as any)
const PlanesPlanIdIndexRoute = PlanesPlanIdIndexRouteImport.update({
id: '/planes/$planId/',
path: '/planes/$planId/',
getParentRoute: () => rootRouteImport,
} as any)
const PlanesListaNuevoRoute = PlanesListaNuevoRouteImport.update({ const PlanesListaNuevoRoute = PlanesListaNuevoRouteImport.update({
id: '/nuevo', id: '/nuevo',
path: '/nuevo', path: '/nuevo',
@@ -77,12 +83,6 @@ const PlanesPlanIdAsignaturasIndexRoute =
path: '/', path: '/',
getParentRoute: () => PlanesPlanIdAsignaturasRouteRoute, getParentRoute: () => PlanesPlanIdAsignaturasRouteRoute,
} as any) } as any)
const PlanesPlanIdDetalleIndexRoute =
PlanesPlanIdDetalleIndexRouteImport.update({
id: '/',
path: '/',
getParentRoute: () => PlanesPlanIdDetalleRouteRoute,
} as any)
const PlanesPlanIdDetalleMateriasRoute = const PlanesPlanIdDetalleMateriasRoute =
PlanesPlanIdDetalleMateriasRouteImport.update({ PlanesPlanIdDetalleMateriasRouteImport.update({
id: '/materias', id: '/materias',
@@ -118,6 +118,12 @@ const PlanesPlanIdDetalleDocumentoRoute =
path: '/documento', path: '/documento',
getParentRoute: () => PlanesPlanIdDetalleRouteRoute, getParentRoute: () => PlanesPlanIdDetalleRouteRoute,
} as any) } as any)
const PlanesPlanIdDetalleDatosRoute =
PlanesPlanIdDetalleDatosRouteImport.update({
id: '/datos',
path: '/datos',
getParentRoute: () => PlanesPlanIdDetalleRouteRoute,
} as any)
const PlanesPlanIdAsignaturasListaRouteRoute = const PlanesPlanIdAsignaturasListaRouteRoute =
PlanesPlanIdAsignaturasListaRouteRouteImport.update({ PlanesPlanIdAsignaturasListaRouteRouteImport.update({
id: '/_lista', id: '/_lista',
@@ -145,14 +151,15 @@ export interface FileRoutesByFullPath {
'/planes/$planId': typeof PlanesPlanIdDetalleRouteRouteWithChildren '/planes/$planId': typeof PlanesPlanIdDetalleRouteRouteWithChildren
'/planes/$planId/asignaturas': typeof PlanesPlanIdAsignaturasListaRouteRouteWithChildren '/planes/$planId/asignaturas': typeof PlanesPlanIdAsignaturasListaRouteRouteWithChildren
'/planes/nuevo': typeof PlanesListaNuevoRoute '/planes/nuevo': typeof PlanesListaNuevoRoute
'/planes/$planId/': typeof PlanesPlanIdIndexRoute
'/planes/$planId/asignaturas/$asignaturaId': typeof PlanesPlanIdAsignaturasAsignaturaIdRouteRoute '/planes/$planId/asignaturas/$asignaturaId': typeof PlanesPlanIdAsignaturasAsignaturaIdRouteRoute
'/planes/$planId/datos': typeof PlanesPlanIdDetalleDatosRoute
'/planes/$planId/documento': typeof PlanesPlanIdDetalleDocumentoRoute '/planes/$planId/documento': typeof PlanesPlanIdDetalleDocumentoRoute
'/planes/$planId/flujo': typeof PlanesPlanIdDetalleFlujoRoute '/planes/$planId/flujo': typeof PlanesPlanIdDetalleFlujoRoute
'/planes/$planId/historial': typeof PlanesPlanIdDetalleHistorialRoute '/planes/$planId/historial': typeof PlanesPlanIdDetalleHistorialRoute
'/planes/$planId/iaplan': typeof PlanesPlanIdDetalleIaplanRoute '/planes/$planId/iaplan': typeof PlanesPlanIdDetalleIaplanRoute
'/planes/$planId/mapa': typeof PlanesPlanIdDetalleMapaRoute '/planes/$planId/mapa': typeof PlanesPlanIdDetalleMapaRoute
'/planes/$planId/materias': typeof PlanesPlanIdDetalleMateriasRoute '/planes/$planId/materias': typeof PlanesPlanIdDetalleMateriasRoute
'/planes/$planId/': typeof PlanesPlanIdDetalleIndexRoute
'/planes/$planId/asignaturas/': typeof PlanesPlanIdAsignaturasIndexRoute '/planes/$planId/asignaturas/': typeof PlanesPlanIdAsignaturasIndexRoute
'/planes/$planId/asignaturas/nueva': typeof PlanesPlanIdAsignaturasListaNuevaRoute '/planes/$planId/asignaturas/nueva': typeof PlanesPlanIdAsignaturasListaNuevaRoute
} }
@@ -162,16 +169,17 @@ export interface FileRoutesByTo {
'/login': typeof LoginRoute '/login': typeof LoginRoute
'/planes': typeof PlanesListaRouteRouteWithChildren '/planes': typeof PlanesListaRouteRouteWithChildren
'/demo/tanstack-query': typeof DemoTanstackQueryRoute '/demo/tanstack-query': typeof DemoTanstackQueryRoute
'/planes/$planId': typeof PlanesPlanIdIndexRoute
'/planes/nuevo': typeof PlanesListaNuevoRoute '/planes/nuevo': typeof PlanesListaNuevoRoute
'/planes/$planId/asignaturas/$asignaturaId': typeof PlanesPlanIdAsignaturasAsignaturaIdRouteRoute '/planes/$planId/asignaturas/$asignaturaId': typeof PlanesPlanIdAsignaturasAsignaturaIdRouteRoute
'/planes/$planId/asignaturas': typeof PlanesPlanIdAsignaturasIndexRoute '/planes/$planId/asignaturas': typeof PlanesPlanIdAsignaturasIndexRoute
'/planes/$planId/datos': typeof PlanesPlanIdDetalleDatosRoute
'/planes/$planId/documento': typeof PlanesPlanIdDetalleDocumentoRoute '/planes/$planId/documento': typeof PlanesPlanIdDetalleDocumentoRoute
'/planes/$planId/flujo': typeof PlanesPlanIdDetalleFlujoRoute '/planes/$planId/flujo': typeof PlanesPlanIdDetalleFlujoRoute
'/planes/$planId/historial': typeof PlanesPlanIdDetalleHistorialRoute '/planes/$planId/historial': typeof PlanesPlanIdDetalleHistorialRoute
'/planes/$planId/iaplan': typeof PlanesPlanIdDetalleIaplanRoute '/planes/$planId/iaplan': typeof PlanesPlanIdDetalleIaplanRoute
'/planes/$planId/mapa': typeof PlanesPlanIdDetalleMapaRoute '/planes/$planId/mapa': typeof PlanesPlanIdDetalleMapaRoute
'/planes/$planId/materias': typeof PlanesPlanIdDetalleMateriasRoute '/planes/$planId/materias': typeof PlanesPlanIdDetalleMateriasRoute
'/planes/$planId': typeof PlanesPlanIdDetalleIndexRoute
'/planes/$planId/asignaturas/nueva': typeof PlanesPlanIdAsignaturasListaNuevaRoute '/planes/$planId/asignaturas/nueva': typeof PlanesPlanIdAsignaturasListaNuevaRoute
} }
export interface FileRoutesById { export interface FileRoutesById {
@@ -184,15 +192,16 @@ export interface FileRoutesById {
'/planes/$planId/_detalle': typeof PlanesPlanIdDetalleRouteRouteWithChildren '/planes/$planId/_detalle': typeof PlanesPlanIdDetalleRouteRouteWithChildren
'/planes/$planId/asignaturas': typeof PlanesPlanIdAsignaturasRouteRouteWithChildren '/planes/$planId/asignaturas': typeof PlanesPlanIdAsignaturasRouteRouteWithChildren
'/planes/_lista/nuevo': typeof PlanesListaNuevoRoute '/planes/_lista/nuevo': typeof PlanesListaNuevoRoute
'/planes/$planId/': typeof PlanesPlanIdIndexRoute
'/planes/$planId/asignaturas/$asignaturaId': typeof PlanesPlanIdAsignaturasAsignaturaIdRouteRoute '/planes/$planId/asignaturas/$asignaturaId': typeof PlanesPlanIdAsignaturasAsignaturaIdRouteRoute
'/planes/$planId/asignaturas/_lista': typeof PlanesPlanIdAsignaturasListaRouteRouteWithChildren '/planes/$planId/asignaturas/_lista': typeof PlanesPlanIdAsignaturasListaRouteRouteWithChildren
'/planes/$planId/_detalle/datos': typeof PlanesPlanIdDetalleDatosRoute
'/planes/$planId/_detalle/documento': typeof PlanesPlanIdDetalleDocumentoRoute '/planes/$planId/_detalle/documento': typeof PlanesPlanIdDetalleDocumentoRoute
'/planes/$planId/_detalle/flujo': typeof PlanesPlanIdDetalleFlujoRoute '/planes/$planId/_detalle/flujo': typeof PlanesPlanIdDetalleFlujoRoute
'/planes/$planId/_detalle/historial': typeof PlanesPlanIdDetalleHistorialRoute '/planes/$planId/_detalle/historial': typeof PlanesPlanIdDetalleHistorialRoute
'/planes/$planId/_detalle/iaplan': typeof PlanesPlanIdDetalleIaplanRoute '/planes/$planId/_detalle/iaplan': typeof PlanesPlanIdDetalleIaplanRoute
'/planes/$planId/_detalle/mapa': typeof PlanesPlanIdDetalleMapaRoute '/planes/$planId/_detalle/mapa': typeof PlanesPlanIdDetalleMapaRoute
'/planes/$planId/_detalle/materias': typeof PlanesPlanIdDetalleMateriasRoute '/planes/$planId/_detalle/materias': typeof PlanesPlanIdDetalleMateriasRoute
'/planes/$planId/_detalle/': typeof PlanesPlanIdDetalleIndexRoute
'/planes/$planId/asignaturas/': typeof PlanesPlanIdAsignaturasIndexRoute '/planes/$planId/asignaturas/': typeof PlanesPlanIdAsignaturasIndexRoute
'/planes/$planId/asignaturas/_lista/nueva': typeof PlanesPlanIdAsignaturasListaNuevaRoute '/planes/$planId/asignaturas/_lista/nueva': typeof PlanesPlanIdAsignaturasListaNuevaRoute
} }
@@ -207,14 +216,15 @@ export interface FileRouteTypes {
| '/planes/$planId' | '/planes/$planId'
| '/planes/$planId/asignaturas' | '/planes/$planId/asignaturas'
| '/planes/nuevo' | '/planes/nuevo'
| '/planes/$planId/'
| '/planes/$planId/asignaturas/$asignaturaId' | '/planes/$planId/asignaturas/$asignaturaId'
| '/planes/$planId/datos'
| '/planes/$planId/documento' | '/planes/$planId/documento'
| '/planes/$planId/flujo' | '/planes/$planId/flujo'
| '/planes/$planId/historial' | '/planes/$planId/historial'
| '/planes/$planId/iaplan' | '/planes/$planId/iaplan'
| '/planes/$planId/mapa' | '/planes/$planId/mapa'
| '/planes/$planId/materias' | '/planes/$planId/materias'
| '/planes/$planId/'
| '/planes/$planId/asignaturas/' | '/planes/$planId/asignaturas/'
| '/planes/$planId/asignaturas/nueva' | '/planes/$planId/asignaturas/nueva'
fileRoutesByTo: FileRoutesByTo fileRoutesByTo: FileRoutesByTo
@@ -224,16 +234,17 @@ export interface FileRouteTypes {
| '/login' | '/login'
| '/planes' | '/planes'
| '/demo/tanstack-query' | '/demo/tanstack-query'
| '/planes/$planId'
| '/planes/nuevo' | '/planes/nuevo'
| '/planes/$planId/asignaturas/$asignaturaId' | '/planes/$planId/asignaturas/$asignaturaId'
| '/planes/$planId/asignaturas' | '/planes/$planId/asignaturas'
| '/planes/$planId/datos'
| '/planes/$planId/documento' | '/planes/$planId/documento'
| '/planes/$planId/flujo' | '/planes/$planId/flujo'
| '/planes/$planId/historial' | '/planes/$planId/historial'
| '/planes/$planId/iaplan' | '/planes/$planId/iaplan'
| '/planes/$planId/mapa' | '/planes/$planId/mapa'
| '/planes/$planId/materias' | '/planes/$planId/materias'
| '/planes/$planId'
| '/planes/$planId/asignaturas/nueva' | '/planes/$planId/asignaturas/nueva'
id: id:
| '__root__' | '__root__'
@@ -245,15 +256,16 @@ export interface FileRouteTypes {
| '/planes/$planId/_detalle' | '/planes/$planId/_detalle'
| '/planes/$planId/asignaturas' | '/planes/$planId/asignaturas'
| '/planes/_lista/nuevo' | '/planes/_lista/nuevo'
| '/planes/$planId/'
| '/planes/$planId/asignaturas/$asignaturaId' | '/planes/$planId/asignaturas/$asignaturaId'
| '/planes/$planId/asignaturas/_lista' | '/planes/$planId/asignaturas/_lista'
| '/planes/$planId/_detalle/datos'
| '/planes/$planId/_detalle/documento' | '/planes/$planId/_detalle/documento'
| '/planes/$planId/_detalle/flujo' | '/planes/$planId/_detalle/flujo'
| '/planes/$planId/_detalle/historial' | '/planes/$planId/_detalle/historial'
| '/planes/$planId/_detalle/iaplan' | '/planes/$planId/_detalle/iaplan'
| '/planes/$planId/_detalle/mapa' | '/planes/$planId/_detalle/mapa'
| '/planes/$planId/_detalle/materias' | '/planes/$planId/_detalle/materias'
| '/planes/$planId/_detalle/'
| '/planes/$planId/asignaturas/' | '/planes/$planId/asignaturas/'
| '/planes/$planId/asignaturas/_lista/nueva' | '/planes/$planId/asignaturas/_lista/nueva'
fileRoutesById: FileRoutesById fileRoutesById: FileRoutesById
@@ -266,6 +278,7 @@ export interface RootRouteChildren {
DemoTanstackQueryRoute: typeof DemoTanstackQueryRoute DemoTanstackQueryRoute: typeof DemoTanstackQueryRoute
PlanesPlanIdDetalleRouteRoute: typeof PlanesPlanIdDetalleRouteRouteWithChildren PlanesPlanIdDetalleRouteRoute: typeof PlanesPlanIdDetalleRouteRouteWithChildren
PlanesPlanIdAsignaturasRouteRoute: typeof PlanesPlanIdAsignaturasRouteRouteWithChildren PlanesPlanIdAsignaturasRouteRoute: typeof PlanesPlanIdAsignaturasRouteRouteWithChildren
PlanesPlanIdIndexRoute: typeof PlanesPlanIdIndexRoute
} }
declare module '@tanstack/react-router' { declare module '@tanstack/react-router' {
@@ -305,6 +318,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof PlanesListaRouteRouteImport preLoaderRoute: typeof PlanesListaRouteRouteImport
parentRoute: typeof rootRouteImport parentRoute: typeof rootRouteImport
} }
'/planes/$planId/': {
id: '/planes/$planId/'
path: '/planes/$planId'
fullPath: '/planes/$planId/'
preLoaderRoute: typeof PlanesPlanIdIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/planes/_lista/nuevo': { '/planes/_lista/nuevo': {
id: '/planes/_lista/nuevo' id: '/planes/_lista/nuevo'
path: '/nuevo' path: '/nuevo'
@@ -333,13 +353,6 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof PlanesPlanIdAsignaturasIndexRouteImport preLoaderRoute: typeof PlanesPlanIdAsignaturasIndexRouteImport
parentRoute: typeof PlanesPlanIdAsignaturasRouteRoute parentRoute: typeof PlanesPlanIdAsignaturasRouteRoute
} }
'/planes/$planId/_detalle/': {
id: '/planes/$planId/_detalle/'
path: '/'
fullPath: '/planes/$planId/'
preLoaderRoute: typeof PlanesPlanIdDetalleIndexRouteImport
parentRoute: typeof PlanesPlanIdDetalleRouteRoute
}
'/planes/$planId/_detalle/materias': { '/planes/$planId/_detalle/materias': {
id: '/planes/$planId/_detalle/materias' id: '/planes/$planId/_detalle/materias'
path: '/materias' path: '/materias'
@@ -382,6 +395,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof PlanesPlanIdDetalleDocumentoRouteImport preLoaderRoute: typeof PlanesPlanIdDetalleDocumentoRouteImport
parentRoute: typeof PlanesPlanIdDetalleRouteRoute parentRoute: typeof PlanesPlanIdDetalleRouteRoute
} }
'/planes/$planId/_detalle/datos': {
id: '/planes/$planId/_detalle/datos'
path: '/datos'
fullPath: '/planes/$planId/datos'
preLoaderRoute: typeof PlanesPlanIdDetalleDatosRouteImport
parentRoute: typeof PlanesPlanIdDetalleRouteRoute
}
'/planes/$planId/asignaturas/_lista': { '/planes/$planId/asignaturas/_lista': {
id: '/planes/$planId/asignaturas/_lista' id: '/planes/$planId/asignaturas/_lista'
path: '' path: ''
@@ -418,24 +438,24 @@ const PlanesListaRouteRouteWithChildren =
PlanesListaRouteRoute._addFileChildren(PlanesListaRouteRouteChildren) PlanesListaRouteRoute._addFileChildren(PlanesListaRouteRouteChildren)
interface PlanesPlanIdDetalleRouteRouteChildren { interface PlanesPlanIdDetalleRouteRouteChildren {
PlanesPlanIdDetalleDatosRoute: typeof PlanesPlanIdDetalleDatosRoute
PlanesPlanIdDetalleDocumentoRoute: typeof PlanesPlanIdDetalleDocumentoRoute PlanesPlanIdDetalleDocumentoRoute: typeof PlanesPlanIdDetalleDocumentoRoute
PlanesPlanIdDetalleFlujoRoute: typeof PlanesPlanIdDetalleFlujoRoute PlanesPlanIdDetalleFlujoRoute: typeof PlanesPlanIdDetalleFlujoRoute
PlanesPlanIdDetalleHistorialRoute: typeof PlanesPlanIdDetalleHistorialRoute PlanesPlanIdDetalleHistorialRoute: typeof PlanesPlanIdDetalleHistorialRoute
PlanesPlanIdDetalleIaplanRoute: typeof PlanesPlanIdDetalleIaplanRoute PlanesPlanIdDetalleIaplanRoute: typeof PlanesPlanIdDetalleIaplanRoute
PlanesPlanIdDetalleMapaRoute: typeof PlanesPlanIdDetalleMapaRoute PlanesPlanIdDetalleMapaRoute: typeof PlanesPlanIdDetalleMapaRoute
PlanesPlanIdDetalleMateriasRoute: typeof PlanesPlanIdDetalleMateriasRoute PlanesPlanIdDetalleMateriasRoute: typeof PlanesPlanIdDetalleMateriasRoute
PlanesPlanIdDetalleIndexRoute: typeof PlanesPlanIdDetalleIndexRoute
} }
const PlanesPlanIdDetalleRouteRouteChildren: PlanesPlanIdDetalleRouteRouteChildren = const PlanesPlanIdDetalleRouteRouteChildren: PlanesPlanIdDetalleRouteRouteChildren =
{ {
PlanesPlanIdDetalleDatosRoute: PlanesPlanIdDetalleDatosRoute,
PlanesPlanIdDetalleDocumentoRoute: PlanesPlanIdDetalleDocumentoRoute, PlanesPlanIdDetalleDocumentoRoute: PlanesPlanIdDetalleDocumentoRoute,
PlanesPlanIdDetalleFlujoRoute: PlanesPlanIdDetalleFlujoRoute, PlanesPlanIdDetalleFlujoRoute: PlanesPlanIdDetalleFlujoRoute,
PlanesPlanIdDetalleHistorialRoute: PlanesPlanIdDetalleHistorialRoute, PlanesPlanIdDetalleHistorialRoute: PlanesPlanIdDetalleHistorialRoute,
PlanesPlanIdDetalleIaplanRoute: PlanesPlanIdDetalleIaplanRoute, PlanesPlanIdDetalleIaplanRoute: PlanesPlanIdDetalleIaplanRoute,
PlanesPlanIdDetalleMapaRoute: PlanesPlanIdDetalleMapaRoute, PlanesPlanIdDetalleMapaRoute: PlanesPlanIdDetalleMapaRoute,
PlanesPlanIdDetalleMateriasRoute: PlanesPlanIdDetalleMateriasRoute, PlanesPlanIdDetalleMateriasRoute: PlanesPlanIdDetalleMateriasRoute,
PlanesPlanIdDetalleIndexRoute: PlanesPlanIdDetalleIndexRoute,
} }
const PlanesPlanIdDetalleRouteRouteWithChildren = const PlanesPlanIdDetalleRouteRouteWithChildren =
@@ -487,6 +507,7 @@ const rootRouteChildren: RootRouteChildren = {
PlanesPlanIdDetalleRouteRoute: PlanesPlanIdDetalleRouteRouteWithChildren, PlanesPlanIdDetalleRouteRoute: PlanesPlanIdDetalleRouteRouteWithChildren,
PlanesPlanIdAsignaturasRouteRoute: PlanesPlanIdAsignaturasRouteRoute:
PlanesPlanIdAsignaturasRouteRouteWithChildren, PlanesPlanIdAsignaturasRouteRouteWithChildren,
PlanesPlanIdIndexRoute: PlanesPlanIdIndexRoute,
} }
export const routeTree = rootRouteImport export const routeTree = rootRouteImport
._addFileChildren(rootRouteChildren) ._addFileChildren(rootRouteChildren)

73
src/routes/planes/$planId/_detalle/index.tsx → src/routes/planes/$planId/_detalle/datos.tsx
View File

@@ -12,16 +12,10 @@ import type { DatosGeneralesField } from '@/types/plan'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { lateralConfetti } from '@/components/ui/lateral-confetti' import { lateralConfetti } from '@/components/ui/lateral-confetti'
import { Textarea } from '@/components/ui/textarea' import { Textarea } from '@/components/ui/textarea'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { usePlan } from '@/data' import { usePlan } from '@/data'
// import { toast } from 'sonner' // Asegúrate de tener sonner instalado o quita la línea // import { toast } from 'sonner' // Asegúrate de tener sonner instalado o quita la línea
export const Route = createFileRoute('/planes/$planId/_detalle/')({ export const Route = createFileRoute('/planes/$planId/_detalle/datos')({
component: DatosGeneralesPage, component: DatosGeneralesPage,
}) })
@@ -50,41 +44,24 @@ function DatosGeneralesPage() {
// Efecto para transformar data?.datos en el arreglo de campos // Efecto para transformar data?.datos en el arreglo de campos
useEffect(() => { useEffect(() => {
const properties = data?.estructuras_plan?.definicion?.properties // 2. Validación de seguridad para sourceData
const sourceData = data?.datos
const valores = data?.datos as Record<string, unknown> if (sourceData && typeof sourceData === 'object') {
if (properties && typeof properties === 'object') {
const datosTransformados: Array<DatosGeneralesField> = Object.entries( const datosTransformados: Array<DatosGeneralesField> = Object.entries(
properties, sourceData,
).map(([key, schema], index) => { ).map(([key, value], index) => ({
const rawValue = valores[key]
return {
id: (index + 1).toString(), id: (index + 1).toString(),
label: schema?.title || formatLabel(key), label: formatLabel(key),
helperText: schema?.description || '', // Forzamos el valor a string de forma segura
holder: schema?.examples || '', value: typeof value === 'string' ? value : value?.toString() || '',
value:
rawValue !== undefined && rawValue !== null ? String(rawValue) : '',
requerido: true, requerido: true,
tipo: 'texto',
// 👇 TIPO DE CAMPO }))
tipo: Array.isArray(schema?.enum)
? 'select'
: schema?.type === 'number'
? 'number'
: 'texto',
opciones: schema?.enum || [],
}
})
setCampos(datosTransformados) setCampos(datosTransformados)
} }
console.log(data)
console.log(properties)
}, [data]) }, [data])
// 3. Manejadores de acciones (Ahora como funciones locales) // 3. Manejadores de acciones (Ahora como funciones locales)
@@ -144,20 +121,11 @@ function DatosGeneralesPage() {
}`} }`}
> >
{/* Header de la Card */} {/* Header de la Card */}
<TooltipProvider>
<div className="flex items-center justify-between border-b bg-slate-50/50 px-5 py-3"> <div className="flex items-center justify-between border-b bg-slate-50/50 px-5 py-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Tooltip> <h3 className="text-sm font-medium text-slate-700">
<TooltipTrigger asChild>
<h3 className="cursor-help text-sm font-medium text-slate-700">
{campo.label} {campo.label}
</h3> </h3>
</TooltipTrigger>
<TooltipContent className="max-w-xs text-xs">
{campo.helperText || 'Información del campo'}
</TooltipContent>
</Tooltip>
{campo.requerido && ( {campo.requerido && (
<span className="text-xs text-red-500">*</span> <span className="text-xs text-red-500">*</span>
)} )}
@@ -165,8 +133,6 @@ function DatosGeneralesPage() {
{!isEditing && ( {!isEditing && (
<div className="flex gap-1"> <div className="flex gap-1">
<Tooltip>
<TooltipTrigger asChild>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
@@ -175,12 +141,6 @@ function DatosGeneralesPage() {
> >
<Sparkles size={14} /> <Sparkles size={14} />
</Button> </Button>
</TooltipTrigger>
<TooltipContent>Generar con IA</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
@@ -189,13 +149,9 @@ function DatosGeneralesPage() {
> >
<Pencil size={14} /> <Pencil size={14} />
</Button> </Button>
</TooltipTrigger>
<TooltipContent>Editar campo</TooltipContent>
</Tooltip>
</div> </div>
)} )}
</div> </div>
</TooltipProvider>
{/* Contenido de la Card */} {/* Contenido de la Card */}
<div className="p-5"> <div className="p-5">
@@ -204,8 +160,7 @@ function DatosGeneralesPage() {
<Textarea <Textarea
value={editValue} value={editValue}
onChange={(e) => setEditValue(e.target.value)} onChange={(e) => setEditValue(e.target.value)}
className="placeholder:text-muted-foreground/70 min-h-30 not-italic placeholder:italic" className="min-h-30"
placeholder={`Ej. ${campo.holder[0] as string}`}
/> />
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button <Button

117
src/routes/planes/$planId/_detalle/documento.tsx
View File

@@ -8,7 +8,6 @@ import {
Clock, Clock,
FileJson, FileJson,
} from 'lucide-react' } from 'lucide-react'
import { useCallback, useEffect, useState } from 'react'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card' import { Card, CardContent } from '@/components/ui/card'
@@ -20,34 +19,9 @@ export const Route = createFileRoute('/planes/$planId/_detalle/documento')({
function RouteComponent() { function RouteComponent() {
const { planId } = useParams({ from: '/planes/$planId/_detalle/documento' }) const { planId } = useParams({ from: '/planes/$planId/_detalle/documento' })
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 () => { const handleDownloadPdf = async () => {
console.log('entre aqui ')
try { try {
const pdfBlob = await fetchPlanPdf({ const pdfBlob = await fetchPlanPdf({
plan_estudio_id: planId, plan_estudio_id: planId,
@@ -80,12 +54,7 @@ function RouteComponent() {
</p> </p>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button variant="outline" size="sm" className="gap-2">
variant="outline"
size="sm"
className="gap-2"
onClick={loadPdfPreview}
>
<RefreshCcw size={16} /> Regenerar <RefreshCcw size={16} /> Regenerar
</Button> </Button>
<Button variant="outline" size="sm" className="gap-2"> <Button variant="outline" size="sm" className="gap-2">
@@ -121,42 +90,70 @@ function RouteComponent() {
</div> </div>
{/* CONTENEDOR DEL DOCUMENTO (Visor) */} {/* CONTENEDOR DEL DOCUMENTO (Visor) */}
{/* CONTENEDOR DEL VISOR REAL */}
<Card className="overflow-hidden border-slate-200 shadow-sm"> <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 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"> <div className="flex items-center gap-2 text-xs font-medium text-slate-500">
<FileText size={14} /> Preview_Documento.pdf <FileText size={14} />
Plan_Estudios_ISC_2024.pdf
</div> </div>
{pdfUrl && ( <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs">
<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} /> Abrir en nueva pestaña <ExternalLink size={12} />
</Button> </Button>
)}
</div> </div>
<CardContent className="flex min-h-[800px] justify-center bg-slate-500 p-0"> <CardContent className="flex min-h-[800px] justify-center bg-slate-200/50 p-0 py-8">
{isLoading ? ( {/* SIMULACIÓN DE HOJA DE PAPEL */}
<div className="flex flex-col items-center justify-center gap-4 text-white"> <div className="relative min-h-[1000px] w-full max-w-[800px] border bg-white p-12 shadow-2xl md:p-16">
<RefreshCcw size={40} className="animate-spin opacity-50" /> {/* Contenido del Plan */}
<p className="animate-pulse">Generando vista previa del PDF...</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>
) : pdfUrl ? (
/* 3. VISOR DE PDF REAL */ <div className="space-y-8 text-slate-700">
<iframe <section>
src={`${pdfUrl}#toolbar=0&navpanes=0`} <h4 className="mb-2 text-sm font-bold">1. Objetivo General</h4>
className="h-[1000px] w-full max-w-[1000px] border-none shadow-2xl" <p className="text-justify text-sm leading-relaxed">
title="PDF Preview" 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
<div className="flex items-center justify-center p-20 text-slate-400"> informática.
No se pudo cargar la vista previa. </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>
</div>
{/* Marca de agua o decoración lateral (opcional) */}
<div className="absolute top-0 left-0 h-full w-1 bg-slate-100" />
</div> </div>
)}
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

13
src/routes/planes/$planId/_detalle/flujo.tsx
View File

@@ -1,6 +1,5 @@
import { createFileRoute } from '@tanstack/react-router' import { createFileRoute } from '@tanstack/react-router'
import { CheckCircle2, Clock } from 'lucide-react' import { CheckCircle2, Circle, Clock } from 'lucide-react'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -75,7 +74,7 @@ function RouteComponent() {
</div> </div>
<div className="mt-2 w-px flex-1 bg-slate-200" /> <div className="mt-2 w-px flex-1 bg-slate-200" />
</div> </div>
{/* <Card className="flex-1 border-blue-500 bg-blue-50/10"> <Card className="flex-1 border-blue-500 bg-blue-50/10">
<CardHeader className="flex flex-row items-center justify-between py-3"> <CardHeader className="flex flex-row items-center justify-between py-3">
<div> <div>
<CardTitle className="text-lg text-blue-700"> <CardTitle className="text-lg text-blue-700">
@@ -98,11 +97,11 @@ function RouteComponent() {
<li>Mapa curricular aprobado preliminarmente</li> <li>Mapa curricular aprobado preliminarmente</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> */} </Card>
</div> </div>
{/* Estado: Pendiente */} {/* Estado: Pendiente */}
{/* <div className="relative flex gap-4 pb-4"> <div className="relative flex gap-4 pb-4">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="rounded-full bg-slate-100 p-1 text-slate-400"> <div className="rounded-full bg-slate-100 p-1 text-slate-400">
<Circle className="h-6 w-6" /> <Circle className="h-6 w-6" />
@@ -114,7 +113,7 @@ function RouteComponent() {
<Badge variant="outline">Pendiente</Badge> <Badge variant="outline">Pendiente</Badge>
</CardHeader> </CardHeader>
</Card> </Card>
</div> */} </div>
</div> </div>
{/* LADO DERECHO: Formulario de Transición */} {/* LADO DERECHO: Formulario de Transición */}
@@ -146,7 +145,7 @@ function RouteComponent() {
/> />
</div> </div>
<Button className="w-full bg-teal-600 hover:bg-teal-700" disabled> <Button className="w-full bg-teal-600 hover:bg-teal-700">
Avanzar a Revisión Expertos Avanzar a Revisión Expertos
</Button> </Button>
</CardContent> </CardContent>

13
src/routes/planes/$planId/_detalle/historial.tsx
View File

@@ -1,6 +1,5 @@
import { useMemo, useState } from 'react'
import { createFileRoute } from '@tanstack/react-router' import { createFileRoute } from '@tanstack/react-router'
import { format, formatDistanceToNow, parseISO } from 'date-fns'
import { es } from 'date-fns/locale'
import { import {
GitBranch, GitBranch,
Edit3, Edit3,
@@ -13,17 +12,19 @@ import {
History, History,
Calendar, Calendar,
} from 'lucide-react' } from 'lucide-react'
import { useMemo, useState } from 'react'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card' import { Card, CardContent } from '@/components/ui/card'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from '@/components/ui/dialog' } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { usePlanHistorial } from '@/data/hooks/usePlans' 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')({ export const Route = createFileRoute('/planes/$planId/_detalle/historial')({
component: RouteComponent, component: RouteComponent,
@@ -57,7 +58,9 @@ const getEventConfig = (tipo: string, campo: string) => {
function RouteComponent() { function RouteComponent() {
const { planId } = Route.useParams() const { planId } = Route.useParams()
const { data: rawData, isLoading } = usePlanHistorial(planId) const { data: rawData, isLoading } = usePlanHistorial(
'0e0aea4d-b8b4-4e75-8279-6224c3ac769f',
)
// ESTADOS PARA EL MODAL // ESTADOS PARA EL MODAL
const [selectedEvent, setSelectedEvent] = useState<any>(null) const [selectedEvent, setSelectedEvent] = useState<any>(null)

84
src/routes/planes/$planId/_detalle/iaplan.tsx
View File

@@ -106,7 +106,7 @@ function RouteComponent() {
if (field && !selectedFields.find((sf) => sf.key === field.key)) { if (field && !selectedFields.find((sf) => sf.key === field.key)) {
setSelectedFields([field]) setSelectedFields([field])
} }
setInput(`Mejora este campo: ${field?.label} `) setInput(`Mejora este campo: `)
} }
}, [availableFields]) }, [availableFields])
@@ -121,85 +121,46 @@ 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) => { const toggleField = (field: SelectedField) => {
setSelectedFields((prev) => { setSelectedFields((prev) =>
let nextFields prev.find((f) => f.key === field.key)
? prev.filter((f) => f.key !== field.key)
if (prev.find((f) => f.key === field.key)) { : [...prev, field],
nextFields = prev.filter((f) => f.key !== field.key)
} else {
nextFields = [...prev, field]
}
setInput((prevInput) =>
injectFieldsIntoInput(prevInput || 'Mejora este campo:', nextFields),
) )
if (input.endsWith(':')) setInput(input.slice(0, -1))
return nextFields
})
setShowSuggestions(false) 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 handleSend = async (promptOverride?: string) => {
const rawText = promptOverride || input const textToSend = promptOverride || input
if (!rawText.trim() && selectedFields.length === 0) return if (!textToSend.trim() && selectedFields.length === 0) return
const finalPrompt = buildPrompt(rawText)
const userMsg = { const userMsg = {
id: Date.now().toString(), id: Date.now().toString(),
role: 'user', role: 'user',
content: finalPrompt, content: textToSend,
} }
setMessages((prev) => [...prev, userMsg]) setMessages((prev) => [...prev, userMsg])
setInput('') setInput('')
setIsLoading(true) setIsLoading(true)
// Aquí simularías la llamada a la API enviando 'selectedFields' como contexto
setTimeout(() => { setTimeout(() => {
const mockText = const mockText =
'Sugerencia generada basada en los campos seleccionados...' 'Sugerencia generada basada en los campos seleccionados...'
setMessages((prev) => [ setMessages((prev) => [
...prev, ...prev,
{ {
id: Date.now().toString(), id: Date.now().toString(),
role: 'assistant', role: 'assistant',
content: `He analizado ${selectedFields content: `He analizado ${selectedFields.length > 0 ? selectedFields.map((f) => f.label).join(', ') : 'tu solicitud'}. Aquí tienes una propuesta:\n\n${mockText}`,
.map((f) => f.label)
.join(', ')}. Aquí tienes una propuesta:\n\n${mockText}`,
}, },
]) ])
setPendingSuggestion({ text: mockText }) setPendingSuggestion({ text: mockText })
setIsLoading(false) setIsLoading(false)
}, 1200) }, 1200)
} }
return ( return (
<div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4"> <div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
{/* PANEL DE CHAT PRINCIPAL */} {/* PANEL DE CHAT PRINCIPAL */}
@@ -208,8 +169,27 @@ ${fieldsText}
<div className="shrink-0 border-b bg-white p-3"> <div className="shrink-0 border-b bg-white p-3">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<span className="text-[10px] font-bold text-slate-400 uppercase"> <span className="text-[10px] font-bold text-slate-400 uppercase">
Mejorar con IA Campos a mejorar:
</span> </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>
</div> </div>

29
src/routes/planes/$planId/_detalle/route.tsx
View File

@@ -7,7 +7,7 @@ import {
CalendarDays, CalendarDays,
Save, Save,
} from 'lucide-react' } from 'lucide-react'
import { useState, useEffect, forwardRef } from 'react' import { useState, useEffect } from 'react'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
@@ -172,7 +172,7 @@ function RouteComponent() {
{/* 3. Cards de Información con Context Menu */} {/* 3. Cards de Información con Context Menu */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<InfoCard <InfoCard
icon={<GraduationCap className="text-slate-400" />} icon={<GraduationCap className="text-slate-400" />}
label="Nivel" label="Nivel"
@@ -216,7 +216,7 @@ function RouteComponent() {
{/* 4. Navegación de Tabs */} {/* 4. Navegación de Tabs */}
<div className="scrollbar-hide overflow-x-auto border-b"> <div className="scrollbar-hide overflow-x-auto border-b">
<nav className="flex min-w-max gap-8"> <nav className="flex min-w-max gap-8">
<Tab to="/planes/$planId/" params={{ planId }}> <Tab to="/planes/$planId/datos" params={{ planId }}>
Datos Generales Datos Generales
</Tab> </Tab>
<Tab to="/planes/$planId/mapa" params={{ planId }}> <Tab to="/planes/$planId/mapa" params={{ planId }}>
@@ -248,32 +248,31 @@ function RouteComponent() {
) )
} }
const InfoCard = forwardRef< function InfoCard({
HTMLDivElement, icon,
{ label,
value,
isEditable,
}: {
icon: React.ReactNode icon: React.ReactNode
label: string label: string
value: string | number | undefined value: string | number | undefined
isEditable?: boolean isEditable?: boolean
} & React.HTMLAttributes<HTMLDivElement> }) {
>(function InfoCard(
{ icon, label, value, isEditable, className, ...props },
ref,
) {
return ( return (
<div <div
ref={ref}
{...props}
className={`flex h-18 w-full items-center gap-4 rounded-xl border border-slate-200/60 bg-slate-50/50 p-4 shadow-sm transition-all ${ className={`flex h-18 w-full items-center gap-4 rounded-xl border border-slate-200/60 bg-slate-50/50 p-4 shadow-sm transition-all ${
isEditable isEditable
? 'cursor-pointer hover:border-teal-200 hover:bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500/40' ? 'cursor-pointer hover:border-teal-200 hover:bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500/40'
: '' : ''
} ${className ?? ''}`} }`}
> >
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border bg-white shadow-sm"> <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border bg-white shadow-sm">
{icon} {icon}
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
{' '}
{/* min-w-0 es vital para que el truncate funcione en flex */}
<p className="mb-0.5 truncate text-[10px] font-bold tracking-wider text-slate-400 uppercase"> <p className="mb-0.5 truncate text-[10px] font-bold tracking-wider text-slate-400 uppercase">
{label} {label}
</p> </p>
@@ -283,7 +282,7 @@ const InfoCard = forwardRef<
</div> </div>
</div> </div>
) )
}) }
function Tab({ function Tab({
to, to,

10
src/routes/planes/$planId/index.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { createFileRoute, redirect } from '@tanstack/react-router'
export const Route = createFileRoute('/planes/$planId/')({
beforeLoad: ({ params }) => {
throw redirect({
to: '/planes/$planId/materias',
params,
})
},
})

7
src/types/plan.ts
View File

@@ -65,15 +65,12 @@ export interface Plan {
estadoActual: PlanStatus estadoActual: PlanStatus
} }
export type DatosGeneralesField = { export interface DatosGeneralesField {
id: string id: string
label: string label: string
helperText?: string
holder?: string
value: string value: string
tipo: 'texto' | 'lista' | 'parrafo'
requerido: boolean requerido: boolean
tipo: 'texto' | 'parrafo' | 'lista' | 'number' | 'select'
opciones?: Array<string>
} }
export interface CambioPlan { export interface CambioPlan {