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

Enhance table styling and improve empty state message in AsignaturasPage for better user experience
All checks were successful
Deploy to Azure Static Web Apps / build-and-deploy (push) Successful in 1m25s
Details

Browse Source
This commit is contained in:
Alejandro Rosales
2026-03-23 16:16:42 -06:00
parent 36a11e3793
commit 88a2a28a8d
1 changed files with 29 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/routes/planes/$planId/_detalle/asignaturas.tsx
View File

@@ -218,26 +218,30 @@ function AsignaturasPage() {
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="bg-slate-50/50"> <TableRow className="bg-slate-50/50">
<TableHead className="w-30">Clave</TableHead> <TableHead className="w-30 px-6 py-4">Clave</TableHead>
<TableHead>Nombre</TableHead> <TableHead className="px-6 py-4">Nombre</TableHead>
<TableHead className="text-center">Créditos</TableHead> <TableHead className="px-6 py-4 text-center">Créditos</TableHead>
<TableHead className="text-center">Ciclo</TableHead> <TableHead className="px-6 py-4 text-center">Ciclo</TableHead>
<TableHead>Línea Curricular</TableHead> <TableHead className="px-6 py-4">Línea Curricular</TableHead>
<TableHead>Tipo</TableHead> <TableHead className="px-6 py-4">Tipo</TableHead>
<TableHead>Estado</TableHead> <TableHead className="px-6 py-4">Estado</TableHead>
<TableHead className="w-12.5"></TableHead> <TableHead className="w-12.5 px-6 py-4"></TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{filteredAsignaturas.length === 0 ? ( {filteredAsignaturas.length === 0 ? (
<TableRow> <TableRow>
<TableCell colSpan={8} className="h-40 text-center"> <TableCell colSpan={8} className="h-40 px-6 py-8 text-center">
<div className="text-muted-foreground flex flex-col items-center justify-center"> <div className="text-muted-foreground flex flex-col items-center justify-center gap-3">
<BookOpen className="mb-2 h-10 w-10 opacity-20" /> <BookOpen className="h-10 w-10 opacity-20" />
<p className="font-medium">No se encontraron asignaturas</p> <div>
<p className="text-xs"> <p className="font-medium">
Intenta cambiar los filtros de búsqueda No se encontraron asignaturas
</p> </p>
<p className="mt-1 text-xs">
Intenta cambiar los filtros de búsqueda
</p>
</div>
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>
@@ -251,25 +255,25 @@ function AsignaturasPage() {
to: '/planes/$planId/asignaturas/$asignaturaId', to: '/planes/$planId/asignaturas/$asignaturaId',
params: { params: {
planId, planId,
asignaturaId: asignatura.id, // 👈 puede ser índice, consecutivo o slug asignaturaId: asignatura.id,
}, },
state: { state: {
realId: asignatura.id, // 👈 ID largo oculto realId: asignatura.id,
asignaturaId: asignatura.id, asignaturaId: asignatura.id,
} as any, } as any,
}) })
} }
> >
<TableCell className="font-mono text-xs font-bold text-slate-400"> <TableCell className="px-6 py-4 font-mono text-xs font-bold text-slate-400">
{asignatura.clave} {asignatura.clave}
</TableCell> </TableCell>
<TableCell className="font-semibold text-slate-700"> <TableCell className="px-6 py-4 font-semibold text-slate-700">
{asignatura.nombre} {asignatura.nombre}
</TableCell> </TableCell>
<TableCell className="text-center font-medium"> <TableCell className="px-6 py-4 text-center font-medium">
{asignatura.creditos} {asignatura.creditos}
</TableCell> </TableCell>
<TableCell className="text-center"> <TableCell className="px-6 py-4 text-center">
{asignatura.ciclo ? ( {asignatura.ciclo ? (
<Badge variant="outline" className="font-normal"> <Badge variant="outline" className="font-normal">
Ciclo {asignatura.ciclo} Ciclo {asignatura.ciclo}
@@ -278,10 +282,10 @@ function AsignaturasPage() {
<span className="text-slate-300">—</span> <span className="text-slate-300">—</span>
)} )}
</TableCell> </TableCell>
<TableCell className="text-sm text-slate-600"> <TableCell className="px-6 py-4 text-sm text-slate-600">
{getLineaNombre(asignatura.lineaCurricularId)} {getLineaNombre(asignatura.lineaCurricularId)}
</TableCell> </TableCell>
<TableCell> <TableCell className="px-6 py-4">
<Badge <Badge
variant="outline" variant="outline"
className={`capitalize shadow-sm ${tipoConfig[asignatura.tipo].className}`} className={`capitalize shadow-sm ${tipoConfig[asignatura.tipo].className}`}
@@ -289,7 +293,7 @@ function AsignaturasPage() {
{tipoConfig[asignatura.tipo].label} {tipoConfig[asignatura.tipo].label}
</Badge> </Badge>
</TableCell> </TableCell>
<TableCell> <TableCell className="px-6 py-4">
<Badge <Badge
variant="outline" variant="outline"
className={`capitalize shadow-sm ${statusConfig[asignatura.estado].className}`} className={`capitalize shadow-sm ${statusConfig[asignatura.estado].className}`}
@@ -297,7 +301,7 @@ function AsignaturasPage() {
{statusConfig[asignatura.estado].label} {statusConfig[asignatura.estado].label}
</Badge> </Badge>
</TableCell> </TableCell>
<TableCell> <TableCell className="px-6 py-4">
<div className="opacity-0 transition-opacity group-hover:opacity-100"> <div className="opacity-0 transition-opacity group-hover:opacity-100">
<ChevronRight className="h-5 w-5 text-slate-400" /> <ChevronRight className="h-5 w-5 text-slate-400" />
</div> </div>