refactor: update navigation links and search parameters across authenticated routes

This commit is contained in:
2025-08-29 16:51:22 -06:00
parent f8de39e6d1
commit 6c3dd54d5f
6 changed files with 41 additions and 26 deletions

View File

@@ -1,4 +1,4 @@
import { createFileRoute, Link, useRouter } from '@tanstack/react-router'
import { createFileRoute, Link, useNavigate, useRouter } from '@tanstack/react-router'
import { useSuspenseQuery, queryOptions, useQueryClient } from '@tanstack/react-query'
import { supabase, useSupabaseAuth } from '@/auth/supabase'
import * as Icons from 'lucide-react'
@@ -178,6 +178,8 @@ function RouteComponent() {
const isAdmin = !!auth.claims?.claims_admin
const role = auth.claims?.role as 'lci' | 'vicerrectoria' | 'secretario_academico' | 'jefe_carrera' | 'planeacion' | undefined
const navigate = useNavigate({ from: Route.fullPath })
// Mensaje contextual
const roleHint = useMemo(() => {
switch (role) {
@@ -227,7 +229,7 @@ function RouteComponent() {
if (e.key === 'Enter') {
const q = (e.target as HTMLInputElement).value.trim()
if (!q) return
router.navigate({ to: '/planes', search: { q } })
navigate({ to: '/planes', search: { plan: q } })
}
}}
/>
@@ -246,7 +248,7 @@ function RouteComponent() {
{/* Atajos rápidos (según rol) */}
<div className="flex flex-wrap gap-2">
<Link to="/planes" className="inline-flex items-center gap-2 rounded-xl bg-white/20 border border-white/30 px-3 py-1.5 text-sm hover:bg-white/30">
<Link to="/planes" search={{ plan: '' }} className="inline-flex items-center gap-2 rounded-xl bg-white/20 border border-white/30 px-3 py-1.5 text-sm hover:bg-white/30">
<Icons.ScrollText className="w-4 h-4" /> Nuevo plan
</Link>
<Link
@@ -267,10 +269,10 @@ function RouteComponent() {
{/* KPIs principales */}
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<Tile to="/_authenticated/facultades" label="Facultades" value={kpis.facultades} Icon={Icons.Building2} />
<Tile to="/_authenticated/carreras" label="Carreras" value={kpis.carreras} Icon={Icons.GraduationCap} />
<Tile to="/_authenticated/planes" label="Planes de estudio" value={kpis.planes} Icon={Icons.ScrollText} />
<Tile to="/_authenticated/asignaturas" label="Asignaturas" value={kpis.asignaturas} Icon={Icons.BookOpen} />
<Tile to="/facultades" label="Facultades" value={kpis.facultades} Icon={Icons.Building2} />
<Tile to="/carreras" label="Carreras" value={kpis.carreras} Icon={Icons.GraduationCap} />
<Tile to="/planes" label="Planes de estudio" value={kpis.planes} Icon={Icons.ScrollText} />
<Tile to="/asignaturas" label="Asignaturas" value={kpis.asignaturas} Icon={Icons.BookOpen} />
</div>
{/* Calidad + Salud */}
@@ -344,9 +346,8 @@ function HealthRow({ label, value, to }: { label: string; value: number; to: str
return (
<Link
to={to}
className={`flex items-center justify-between rounded-xl px-4 py-3 ring-1 ${
warn ? 'ring-amber-300 bg-amber-50 text-amber-800 hover:bg-amber-100' : 'ring-neutral-200 hover:bg-neutral-50'
} transition-colors`}
className={`flex items-center justify-between rounded-xl px-4 py-3 ring-1 ${warn ? 'ring-amber-300 bg-amber-50 text-amber-800 hover:bg-amber-100' : 'ring-neutral-200 hover:bg-neutral-50'
} transition-colors`}
>
<span className="text-sm">{label}</span>
<span className="text-lg font-semibold tabular-nums">{value}</span>