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

Se hidrata de informacion las tabs de asignatura

Browse Source
This commit is contained in:
Roberto Silva Corona
2026-01-14 15:52:25 -06:00
parent c4329785cc
commit b4b5134cb2
9 changed files with 1490 additions and 819 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,49 +1,64 @@
import { createFileRoute } from '@tanstack/react-router'
import { CheckCircle2, Circle, Clock } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { CheckCircle2, Circle, Clock } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Textarea } from '@/components/ui/textarea'
import { usePlanHistorial } from '@/data/hooks/usePlans'
export const Route = createFileRoute('/planes/$planId/_detalle/flujo')({
component: RouteComponent,
})
function RouteComponent() {
const { data: rawData, isLoading } = usePlanHistorial(
'0e0aea4d-b8b4-4e75-8279-6224c3ac769f',
)
console.log(rawData)
return (
<div className="flex flex-col gap-6 p-6">
{/* Header Informativo (Opcional, si no viene del layout padre) */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold italic">Flujo de Aprobación</h1>
<p className="text-sm text-muted-foreground">Gestiona el proceso de revisión y aprobación del plan</p>
<p className="text-muted-foreground text-sm">
Gestiona el proceso de revisión y aprobación del plan
</p>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
{/* LADO IZQUIERDO: Timeline del Flujo */}
<div className="lg:col-span-2 space-y-4">
<div className="space-y-4 lg:col-span-2">
{/* Estado: Completado */}
<div className="relative flex gap-4 pb-4">
<div className="flex flex-col items-center">
<div className="rounded-full bg-green-100 p-1 text-green-600">
<CheckCircle2 className="h-6 w-6" />
</div>
<div className="w-px flex-1 bg-green-200 mt-2" />
<div className="mt-2 w-px flex-1 bg-green-200" />
</div>
<Card className="flex-1">
<CardHeader className="flex flex-row items-center justify-between py-3">
<div>
<CardTitle className="text-lg">Borrador</CardTitle>
<p className="text-xs text-muted-foreground">14 de enero de 2024</p>
<p className="text-muted-foreground text-xs">
14 de enero de 2024
</p>
</div>
<Badge variant="secondary" className="bg-green-100 text-green-700">Completado</Badge>
<Badge
variant="secondary"
className="bg-green-100 text-green-700"
>
Completado
</Badge>
</CardHeader>
<CardContent className="text-sm border-t pt-3">
<p className="font-semibold text-muted-foreground mb-2">Comentarios</p>
<ul className="list-disc list-inside space-y-1 text-muted-foreground">
<CardContent className="border-t pt-3 text-sm">
<p className="text-muted-foreground mb-2 font-semibold">
Comentarios
</p>
<ul className="text-muted-foreground list-inside list-disc space-y-1">
<li>Documento inicial creado</li>
<li>Estructura base definida</li>
</ul>
@@ -57,19 +72,27 @@ function RouteComponent() {
<div className="rounded-full bg-blue-100 p-1 text-blue-600 ring-2 ring-blue-500 ring-offset-2">
<Clock className="h-6 w-6" />
</div>
<div className="w-px flex-1 bg-slate-200 mt-2" />
<div className="mt-2 w-px flex-1 bg-slate-200" />
</div>
<Card className="flex-1 border-blue-500 bg-blue-50/10">
<CardHeader className="flex flex-row items-center justify-between py-3">
<div>
<CardTitle className="text-lg text-blue-700">En Revisión</CardTitle>
<p className="text-xs text-muted-foreground">19 de febrero de 2024</p>
<CardTitle className="text-lg text-blue-700">
En Revisión
</CardTitle>
<p className="text-muted-foreground text-xs">
19 de febrero de 2024
</p>
</div>
<Badge variant="default" className="bg-blue-500">En curso</Badge>
<Badge variant="default" className="bg-blue-500">
En curso
</Badge>
</CardHeader>
<CardContent className="text-sm border-t border-blue-100 pt-3">
<p className="font-semibold text-muted-foreground mb-2">Comentarios</p>
<ul className="list-disc list-inside space-y-1 text-muted-foreground">
<CardContent className="border-t border-blue-100 pt-3 text-sm">
<p className="text-muted-foreground mb-2 font-semibold">
Comentarios
</p>
<ul className="text-muted-foreground list-inside list-disc space-y-1">
<li>Revisión de objetivo general pendiente</li>
<li>Mapa curricular aprobado preliminarmente</li>
</ul>
@@ -91,7 +114,6 @@ function RouteComponent() {
</CardHeader>
</Card>
</div>
</div>
{/* LADO DERECHO: Formulario de Transición */}
@@ -101,22 +123,24 @@ function RouteComponent() {
<CardTitle className="text-lg">Transición de Estado</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-center justify-between p-3 bg-slate-50 rounded-lg text-sm border">
<div className="flex items-center justify-between rounded-lg border bg-slate-50 p-3 text-sm">
<div className="text-center">
<p className="text-xs text-muted-foreground">Estado actual</p>
<p className="text-muted-foreground text-xs">Estado actual</p>
<p className="font-bold">En Revisión</p>
</div>
<div className="h-px flex-1 bg-slate-300 mx-4" />
<div className="mx-4 h-px flex-1 bg-slate-300" />
<div className="text-center">
<p className="text-xs text-muted-foreground">Siguiente</p>
<p className="font-bold text-primary">Revisión Expertos</p>
<p className="text-muted-foreground text-xs">Siguiente</p>
<p className="text-primary font-bold">Revisión Expertos</p>
</div>
</div>
<div className="space-y-2">
<label className="text-sm font-medium">Comentario de transición</label>
<Textarea
placeholder="Agrega un comentario para la transición..."
<label className="text-sm font-medium">
Comentario de transición
</label>
<Textarea
placeholder="Agrega un comentario para la transición..."
className="min-h-[120px]"
/>
</div>
@@ -127,8 +151,7 @@ function RouteComponent() {
</CardContent>
</Card>
</div>
</div>
</div>
)
}
}