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

Dashboard v1 y configuraciones adicionales de prettier

Browse Source
This commit is contained in:
Guillermo Arrieta Medina
2025-12-18 19:49:50 -06:00
parent e40ea49031
commit ad197c9aad
11 changed files with 1825 additions and 6007 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/routes/dashboard.tsx Normal file
View File

@@ -0,0 +1,190 @@
import DashboardHeader from '@/components/dashboard/DashboardHeader'
import {
ArrowRight,
BookOpenText,
Laptop,
Stethoscope,
Scale,
Calculator,
FlaskConical,
Activity,
PencilRuler,
ClipboardCheck,
} from 'lucide-react'
import PlanEstudiosCard from '@/components/plan_estudios/PlanEstudiosCard'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/dashboard')({
component: RouteComponent,
})
function RouteComponent() {
return (
// 1. min-h-screen para asegurar que llene la pantalla verticalmente
// 2. bg-background para asegurar consistencia con el tema
<main className="bg-background min-h-screen w-full">
{/* 1. max-w-7xl: El tope de anchura.
2. w-full: Para que ocupe el 100% hasta llegar al tope.
3. mx-auto: Para centrarse.
4. px-4 md:px-6: Padding RESPONSIVO interno (seguro para móviles y desktop).
5. py-6: Padding vertical (opcional, para separarse del header).
*/}
<div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 py-6 md:px-6 lg:px-8">
<DashboardHeader
name="Dr. Carlos Mendoza"
role="Jefe de Carrera"
department="Facultad de Ingeniería"
/>
<div className="mt-6 grid gap-6 lg:grid-cols-3">
{/* --- Sección de Mis Planes de Estudio --- */}
<div className="flex flex-col gap-4 lg:col-span-2">
{/* --- Título de sección y enlace a página --- */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="text-primary">
<BookOpenText className="h-6 w-6" strokeWidth={2} />
</div>
<h3 className="text-foreground text-xl font-bold tracking-tight">
Mis Planes de Estudio
</h3>
</div>
{/* Usamos 'group' para animar la flecha al hacer hover en el texto */}
<a
href="/planes"
className="group text-muted-foreground hover:text-primary flex items-center gap-1.5 text-sm font-medium transition-colors"
>
<span>Ver todos</span>
{/* La flecha se mueve a la derecha al hacer hover en el grupo */}
<ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
</a>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<PlanEstudiosCard
Icono={Laptop}
nombrePrograma="Ingeniería en Sistemas Computacionales"
nivel="Licenciatura"
ciclos="8 semestres"
facultad="Facultad de Ingeniería"
estado="Revisión expertos"
claseColorEstado="bg-amber-600"
colorFacultad="#2563eb"
onClick={() => console.log('Navegar a Sistemas...')}
/>
<PlanEstudiosCard
Icono={Stethoscope}
nombrePrograma="Médico Cirujano"
nivel="Licenciatura"
ciclos="10 semestres"
facultad="Facultad de Medicina"
estado="Aprobado"
claseColorEstado="bg-emerald-600"
colorFacultad="#dc2626"
/>
<PlanEstudiosCard
Icono={Calculator}
nombrePrograma="Licenciatura en Actuaría"
nivel="Licenciatura"
ciclos="9 semestres"
facultad="Facultad de Negocios"
estado="Aprobado"
claseColorEstado="bg-emerald-600"
colorFacultad="#059669"
onClick={() => console.log('Ver Actuaría')}
/>
<PlanEstudiosCard
Icono={PencilRuler}
nombrePrograma="Licenciatura en Arquitectura"
nivel="Licenciatura"
ciclos="10 semestres"
facultad="Facultad Mexicana de Arquitectura, Diseño y Comunicación"
estado="En proceso"
claseColorEstado="bg-orange-500"
colorFacultad="#ea580c"
onClick={() => console.log('Ver Arquitectura')}
/>
<PlanEstudiosCard
Icono={Activity}
nombrePrograma="Licenciatura en Fisioterapia"
nivel="Licenciatura"
ciclos="8 semestres"
facultad="Escuela de Altos Estudios en Salud"
estado="Revisión expertos"
claseColorEstado="bg-amber-600"
colorFacultad="#0891b2"
onClick={() => console.log('Ver Fisioterapia')}
/>
<PlanEstudiosCard
Icono={Scale}
nombrePrograma="Licenciatura en Derecho"
nivel="Licenciatura"
ciclos="10 semestres"
facultad="Facultad de Derecho"
estado="Pendiente"
claseColorEstado="bg-yellow-500"
colorFacultad="#7c3aed"
onClick={() => console.log('Ver Derecho')}
/>
<PlanEstudiosCard
Icono={FlaskConical}
nombrePrograma="Químico Farmacéutico Biólogo"
nivel="Licenciatura"
ciclos="9 semestres"
facultad="Facultad de Ciencias Químicas"
estado="Actualización"
claseColorEstado="bg-lime-600"
colorFacultad="#65a30d"
onClick={() => console.log('Ver QFB')}
/>
</div>
</div>
{/* --- Sección de Mis Revisiones --- */}
<div className="flex flex-col gap-4">
{/* --- Título de sección y enlace a página --- */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="text-primary">
<ClipboardCheck className="h-6 w-6" strokeWidth={2} />
</div>
<h3 className="text-foreground text-xl font-bold tracking-tight">
Mis Revisiones
</h3>
</div>
<a
href="/revisiones"
className="group text-muted-foreground hover:text-primary flex items-center gap-1.5 text-sm font-medium transition-colors"
>
<span>Ver todas</span>
<ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
</a>
</div>
{/* --- Lista de revisiones (simplificada para este ejemplo) --- */}
<div className="flex flex-col gap-4">
<div className="min-h-20 rounded-lg border p-4 shadow-md">
Revision 1
</div>
<div className="min-h-20 rounded-lg border p-4 shadow-md">
Revision 2
</div>
<div className="min-h-20 rounded-lg border p-4 shadow-md">
Revision 3
</div>
</div>
</div>
</div>
</div>
</main>
)
}