433 lines
14 KiB
TypeScript
433 lines
14 KiB
TypeScript
import { useCallback, useState } from 'react'
|
|
import { Link } from '@tanstack/react-router'
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { ArrowLeft, GraduationCap, Edit2, Save, Pencil } from 'lucide-react'
|
|
import { ContenidoTematico } from './ContenidoTematico'
|
|
import { BibliographyItem } from './BibliographyItem'
|
|
import { IAMateriaTab } from './IAMateriaTab'
|
|
import type {
|
|
CampoEstructura,
|
|
IAMessage,
|
|
IASugerencia,
|
|
UnidadTematica,
|
|
} from '@/types/materia'
|
|
import {
|
|
mockMateria,
|
|
mockEstructura,
|
|
mockDocumentoSep,
|
|
mockHistorial,
|
|
} from '@/data/mockMateriaData'
|
|
import { DocumentoSEPTab } from './DocumentoSEPTab'
|
|
import { HistorialTab } from './HistorialTab'
|
|
import { useSubject } from '@/data/hooks/useSubjects'
|
|
|
|
export interface BibliografiaEntry {
|
|
id: string
|
|
tipo: 'BASICA' | 'COMPLEMENTARIA'
|
|
cita: string
|
|
fuenteBibliotecaId?: string
|
|
fuenteBiblioteca?: any
|
|
}
|
|
export interface BibliografiaTabProps {
|
|
bibliografia: BibliografiaEntry[]
|
|
onSave: (bibliografia: BibliografiaEntry[]) => void
|
|
isSaving: boolean
|
|
}
|
|
|
|
export default function MateriaDetailPage() {
|
|
// 1. Asegúrate de tener estos estados en tu componente principal
|
|
const [messages, setMessages] = useState<IAMessage[]>([])
|
|
const [datosGenerales, setDatosGenerales] = useState({})
|
|
const [campos, setCampos] = useState<CampoEstructura[]>([])
|
|
|
|
// 2. Funciones de manejo para la IA
|
|
const handleSendMessage = (text: string, campoId?: string) => {
|
|
const newMessage: IAMessage = {
|
|
id: Date.now().toString(),
|
|
role: 'user',
|
|
content: text,
|
|
timestamp: new Date(),
|
|
campoAfectado: campoId,
|
|
}
|
|
setMessages([...messages, newMessage])
|
|
|
|
// Aquí llamarías a tu API de OpenAI/Claude
|
|
//toast.info("Enviando consulta a la IA...");
|
|
}
|
|
|
|
const handleAcceptSuggestion = (sugerencia: IASugerencia) => {
|
|
// Lógica para actualizar el valor del campo en tu estado de datosGenerales
|
|
//toast.success(`Sugerencia aplicada a ${sugerencia.campoNombre}`);
|
|
}
|
|
|
|
// Dentro de tu componente principal (donde están los Tabs)
|
|
const [bibliografia, setBibliografia] = useState<BibliografiaEntry[]>([
|
|
{
|
|
id: '1',
|
|
tipo: 'BASICA',
|
|
cita: 'Russell, S., & Norvig, P. (2020). Artificial Intelligence: A Modern Approach. Pearson.',
|
|
},
|
|
])
|
|
const [isSaving, setIsSaving] = useState(false)
|
|
|
|
const handleSaveBibliografia = (data: BibliografiaEntry[]) => {
|
|
setIsSaving(true)
|
|
// Aquí iría tu llamada a la API
|
|
setBibliografia(data)
|
|
|
|
// Simulamos un guardado
|
|
setTimeout(() => {
|
|
setIsSaving(false)
|
|
//toast.success("Cambios guardados");
|
|
}, 1000)
|
|
}
|
|
|
|
const [isRegenerating, setIsRegenerating] = useState(false)
|
|
|
|
const handleRegenerateDocument = useCallback(() => {
|
|
setIsRegenerating(true)
|
|
setTimeout(() => {
|
|
setIsRegenerating(false)
|
|
}, 2000)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="w-full">
|
|
{/* ================= HEADER ================= */}
|
|
<section className="bg-gradient-to-b from-[#0b1d3a] to-[#0e2a5c] text-white">
|
|
<div className="mx-auto max-w-7xl px-6 py-10">
|
|
<Link
|
|
to="/planes"
|
|
className="mb-4 flex items-center gap-2 text-sm text-blue-200 hover:text-white"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Volver al plan
|
|
</Link>
|
|
|
|
<div className="flex items-start justify-between gap-6">
|
|
<div className="space-y-3">
|
|
<Badge className="border border-blue-700 bg-blue-900/50">
|
|
IA-401
|
|
</Badge>
|
|
|
|
<h1 className="text-3xl font-bold">
|
|
Inteligencia Artificial Aplicada
|
|
</h1>
|
|
|
|
<div className="flex flex-wrap gap-4 text-sm text-blue-200">
|
|
<span className="flex items-center gap-1">
|
|
<GraduationCap className="h-4 w-4" />
|
|
Ingeniería en Sistemas Computacionales
|
|
</span>
|
|
|
|
<span>Facultad de Ingeniería</span>
|
|
</div>
|
|
|
|
<p className="text-sm text-blue-300">
|
|
Pertenece al plan:{' '}
|
|
<span className="cursor-pointer underline">
|
|
Licenciatura en Ingeniería en Sistemas Computacionales 2024
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-end gap-2">
|
|
<Badge variant="secondary">8 créditos</Badge>
|
|
<Badge variant="secondary">7° semestre</Badge>
|
|
<Badge variant="secondary">Sistemas Inteligentes</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ================= TABS ================= */}
|
|
<section className="border-b bg-white">
|
|
<div className="mx-auto max-w-7xl px-6">
|
|
<Tabs defaultValue="datos">
|
|
<TabsList className="h-auto gap-6 bg-transparent p-0">
|
|
<TabsTrigger value="datos">Datos generales</TabsTrigger>
|
|
<TabsTrigger value="contenido">Contenido temático</TabsTrigger>
|
|
<TabsTrigger value="bibliografia">Bibliografía</TabsTrigger>
|
|
<TabsTrigger value="ia">IA de la materia</TabsTrigger>
|
|
<TabsTrigger value="sep">Documento SEP</TabsTrigger>
|
|
<TabsTrigger value="historial">Historial</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<Separator className="mt-2" />
|
|
|
|
{/* ================= TAB: DATOS GENERALES ================= */}
|
|
<TabsContent value="datos">
|
|
<DatosGenerales />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="contenido">
|
|
<ContenidoTematico></ContenidoTematico>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="bibliografia">
|
|
<BibliographyItem
|
|
bibliografia={bibliografia}
|
|
onSave={handleSaveBibliografia}
|
|
isSaving={isSaving}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="ia">
|
|
<IAMateriaTab
|
|
campos={campos}
|
|
datosGenerales={datosGenerales}
|
|
messages={messages}
|
|
onSendMessage={handleSendMessage}
|
|
onAcceptSuggestion={handleAcceptSuggestion}
|
|
onRejectSuggestion={
|
|
(id) =>
|
|
console.log(
|
|
'Rechazada',
|
|
) /*toast.error("Sugerencia rechazada")*/
|
|
}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="sep">
|
|
<DocumentoSEPTab
|
|
documento={mockDocumentoSep}
|
|
materia={mockMateria}
|
|
estructura={mockEstructura}
|
|
datosGenerales={datosGenerales}
|
|
onRegenerate={handleRegenerateDocument}
|
|
isRegenerating={isRegenerating}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="historial">
|
|
<HistorialTab historial={mockHistorial} />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/* ================= TAB CONTENT ================= */
|
|
|
|
function DatosGenerales() {
|
|
const { data: asignaturasApi, isLoading: loadingAsig } = useSubject(
|
|
/*planId*/ '9d4dda6a-488f-428a-8a07-38081592a641',
|
|
)
|
|
|
|
console.log(asignaturasApi.datos)
|
|
|
|
return (
|
|
<div className="animate-in fade-in mx-auto max-w-7xl space-y-8 px-4 py-8 duration-500">
|
|
{/* Encabezado de la Sección */}
|
|
<div className="flex flex-col justify-between gap-4 border-b pb-6 md:flex-row md:items-center">
|
|
<div>
|
|
<h2 className="text-2xl font-bold tracking-tight text-slate-900">
|
|
Datos Generales
|
|
</h2>
|
|
<p className="mt-1 text-slate-500">
|
|
Información oficial estructurada bajo los lineamientos de la SEP.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<Button variant="outline" size="sm" className="gap-2">
|
|
<Edit2 className="h-4 w-4" /> Editar borrador
|
|
</Button>
|
|
<Button size="sm" className="gap-2 bg-blue-600 hover:bg-blue-700">
|
|
<Save className="h-4 w-4" /> Guardar cambios
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Grid de Información */}
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
|
{/* Columna Principal (Más ancha) */}
|
|
<div className="space-y-6 md:col-span-2">
|
|
<div className="space-y-6 md:col-span-2">
|
|
<InfoCard
|
|
title="Competencias a Desarrollar"
|
|
subtitle="Competencias profesionales que se desarrollarán"
|
|
isList={true}
|
|
initialContent={`• Diseñar algoritmos de machine learning para clasificación y predicción\n• Implementar redes neuronales profundas para procesamiento de imágenes\n• Evaluar y optimizar modelos de IA considerando métricas`}
|
|
/>
|
|
|
|
<InfoCard
|
|
title="Objetivo General"
|
|
initialContent="Formar profesionales capaces de diseñar, implementar y evaluar sistemas de inteligencia artificial que resuelvan problemas complejos."
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<InfoCard
|
|
title="Justificación"
|
|
initialContent="La inteligencia artificial es una de las tecnologías más disruptivas..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Columna Lateral (Información Secundaria) */}
|
|
<div className="space-y-6">
|
|
<div className="space-y-6">
|
|
{/* Tarjeta de Requisitos */}
|
|
<InfoCard
|
|
title="Requisitos y Seriación"
|
|
type="requirements"
|
|
initialContent={[
|
|
{
|
|
type: 'Pre-requisito',
|
|
code: 'PA-301',
|
|
name: 'Programación Avanzada',
|
|
},
|
|
{
|
|
type: 'Co-requisito',
|
|
code: 'MAT-201',
|
|
name: 'Matemáticas Discretas',
|
|
},
|
|
]}
|
|
/>
|
|
|
|
{/* Tarjeta de Evaluación */}
|
|
<InfoCard
|
|
title="Sistema de Evaluación"
|
|
type="evaluation"
|
|
initialContent={[
|
|
{ label: 'Exámenes parciales', value: '30%' },
|
|
{ label: 'Proyecto integrador', value: '35%' },
|
|
{ label: 'Prácticas de laboratorio', value: '20%' },
|
|
{ label: 'Participación', value: '15%' },
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface InfoCardProps {
|
|
title: string
|
|
subtitle?: string
|
|
isList?: boolean
|
|
initialContent: any // Puede ser string o array de objetos
|
|
type?: 'text' | 'list' | 'requirements' | 'evaluation'
|
|
}
|
|
|
|
function InfoCard({ title, initialContent, type = 'text' }: InfoCardProps) {
|
|
const [isEditing, setIsEditing] = useState(false)
|
|
const [data, setData] = useState(initialContent)
|
|
// Estado temporal para el área de texto (siempre editamos como texto por simplicidad)
|
|
const [tempText, setTempText] = useState(
|
|
type === 'text' || type === 'list'
|
|
? initialContent
|
|
: JSON.stringify(initialContent, null, 2), // O un formato legible
|
|
)
|
|
|
|
const handleSave = () => {
|
|
// Aquí podrías parsear el texto de vuelta si es necesario
|
|
setData(tempText)
|
|
setIsEditing(false)
|
|
}
|
|
|
|
return (
|
|
<Card className="transition-all hover:border-slate-300">
|
|
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3">
|
|
<CardTitle className="text-sm font-bold text-slate-700">
|
|
{title}
|
|
</CardTitle>
|
|
{!isEditing && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 text-slate-400"
|
|
onClick={() => setIsEditing(true)}
|
|
>
|
|
<Pencil className="h-3 w-3" />
|
|
</Button>
|
|
)}
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
{isEditing ? (
|
|
<div className="space-y-3">
|
|
<Textarea
|
|
value={tempText}
|
|
onChange={(e) => setTempText(e.target.value)}
|
|
className="min-h-[100px] text-xs"
|
|
/>
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => setIsEditing(false)}
|
|
>
|
|
Cancelar
|
|
</Button>
|
|
<Button size="sm" className="bg-[#00a878]" onClick={handleSave}>
|
|
Guardar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-sm">
|
|
{type === 'requirements' && <RequirementsView items={data} />}
|
|
{type === 'evaluation' && <EvaluationView items={data} />}
|
|
{type === 'text' && <p className="text-slate-600">{data}</p>}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
// Vista de Requisitos
|
|
function RequirementsView({ items }: { items: any[] }) {
|
|
return (
|
|
<div className="space-y-3">
|
|
{items.map((req, i) => (
|
|
<div
|
|
key={i}
|
|
className="rounded-lg border border-slate-100 bg-slate-50 p-3"
|
|
>
|
|
<p className="text-[10px] font-bold tracking-tight text-slate-400 uppercase">
|
|
{req.type}
|
|
</p>
|
|
<p className="text-sm font-medium text-slate-700">
|
|
{req.code} {req.name}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Vista de Evaluación
|
|
function EvaluationView({ items }: { items: any[] }) {
|
|
return (
|
|
<div className="space-y-2">
|
|
{items.map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex justify-between border-b border-slate-50 pb-1.5 text-sm italic"
|
|
>
|
|
<span className="text-slate-500">{item.label}</span>
|
|
<span className="font-bold text-blue-600">{item.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function EmptyTab({ title }: { title: string }) {
|
|
return (
|
|
<div className="text-muted-foreground py-16 text-center">
|
|
{title} (pendiente)
|
|
</div>
|
|
)
|
|
}
|