LakG
544bbf38a9
Buscador catálogo alumno: - BuscadorCatalogo.tsx con debounce 120ms, normaliza tildes, ?q= en URL - FiltroCategorias usa data-* attributes, coordinación via window.__labreFiltrar - Cards con data-nombre y data-numero-inventario para filtro combinable AND Grid + imágenes + unidades individuales (admin): - Inventario ahora es grid 2/3/4/5 col con fotos aspect-square - MaterialForm: input file con preview, checkbox trackeado_por_unidad - UnidadesManager: agregar/editar/eliminar unidades por material - Reasignar unidad desde detalles de solicitud (aprobada/activa) - Alumno ve etiqueta de unidad asignada en mis-préstamos - Helper materialImg.imgUrl(path) para URL pública del bucket - Auto-submit debounced del filtro de inventario (input + selects) Estadísticas separada: - Nueva ruta /admin/estadisticas con 6 KPIs (movidos de /admin/inventario) - 3 gráficas recharts: top 10 materiales, solicitudes/día, distribución estados - Chart.tsx wrapper con paleta UABC + respeta prefers-reduced-motion - Nav admin: Panel · Solicitudes · Inventario (box) · Estadísticas (stats) · Reportes - admin/index.astro usa todayMX() (fix inconsistencia) Notificaciones pendientes (admin): - Badge SSR con conteo de pendientes sobre ícono Solicitudes (sidebar + dock) - BadgeSolicitudes.tsx: canal Realtime en prestamos.solicitudes, +1 en INSERT con toast, refetch en UPDATE (replica identity default no trae old.estado) - Recharts añadido a package.json
210 lines
9.0 KiB
Plaintext
210 lines
9.0 KiB
Plaintext
---
|
||
import AppLayout from '@/layouts/AppLayout.astro';
|
||
|
||
type Estado = 'pendiente' | 'aprobado' | 'rechazado' | 'activo' | 'devuelto' | 'vencido';
|
||
|
||
type Item = {
|
||
cantidad: number;
|
||
descripcion: string | null;
|
||
material: { id: number; nombre: string; numero_inventario: string | null } | null;
|
||
material_unidad: { etiqueta: string } | null;
|
||
};
|
||
|
||
type Solicitud = {
|
||
id: number;
|
||
estado: Estado;
|
||
fecha_solicitud: string;
|
||
fecha_aprobacion: string | null;
|
||
fecha_devolucion_estimada: string | null;
|
||
fecha_devolucion_real: string | null;
|
||
notas: string | null;
|
||
maestro_responsable: string;
|
||
items: Item[];
|
||
};
|
||
|
||
const user = Astro.locals.user!;
|
||
|
||
const { data, error } = await Astro.locals.supabase
|
||
.from('solicitudes')
|
||
.select('id, estado, fecha_solicitud, fecha_aprobacion, fecha_devolucion_estimada, fecha_devolucion_real, notas, maestro_responsable, items:solicitud_items(cantidad, descripcion, material:materiales(id, nombre, numero_inventario), material_unidad:material_unidades(etiqueta))')
|
||
.eq('alumno_id', user.id)
|
||
.order('fecha_solicitud', { ascending: false });
|
||
|
||
const prestamos = (data ?? []) as unknown as Solicitud[];
|
||
|
||
const activosSet = new Set<Estado>(['pendiente', 'aprobado', 'activo']);
|
||
const activos = prestamos.filter((p) => activosSet.has(p.estado));
|
||
const historial = prestamos.filter((p) => !activosSet.has(p.estado));
|
||
|
||
const fmtFecha = new Intl.DateTimeFormat('es-MX', { dateStyle: 'medium' });
|
||
const fmt = (d: string | null) => (d ? fmtFecha.format(new Date(d)) : '—');
|
||
|
||
const estadoLabel: Record<Estado, string> = {
|
||
pendiente: 'Pendiente',
|
||
aprobado: 'Aprobado',
|
||
activo: 'Activo',
|
||
rechazado: 'Rechazado',
|
||
devuelto: 'Devuelto',
|
||
vencido: 'Vencido',
|
||
};
|
||
|
||
const estadoColor: Record<Estado, string> = {
|
||
pendiente: 'var(--color-ink)',
|
||
aprobado: 'var(--color-positive)',
|
||
activo: 'var(--color-positive)',
|
||
devuelto: 'var(--color-ink)',
|
||
rechazado: 'var(--color-danger)',
|
||
vencido: 'var(--color-danger)',
|
||
};
|
||
|
||
const badgeStyle = (e: Estado) =>
|
||
`background: color-mix(in oklab, ${estadoColor[e]} 18%, white); color: var(--color-ink); border: 1.5px solid ${estadoColor[e]};`;
|
||
---
|
||
<AppLayout title="Mis préstamos — LabPréstamos">
|
||
<div class="max-w-4xl">
|
||
<header class="mb-6">
|
||
<h1 class="text-2xl md:text-3xl font-semibold">Mis préstamos</h1>
|
||
<p class="text-sm opacity-70 mt-1">Estado de tus solicitudes actuales e historial.</p>
|
||
</header>
|
||
|
||
{error && (
|
||
<div class="card mb-6" role="alert" style="border-color: color-mix(in oklab, var(--color-danger) 30%, transparent);">
|
||
<p class="text-sm" style="color: var(--color-danger-text);">
|
||
No se pudieron cargar tus préstamos. Recarga la página o intenta más tarde.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{!error && prestamos.length === 0 && (
|
||
<div class="card text-center">
|
||
<h2 class="text-lg font-semibold mb-1">Aún no has solicitado material</h2>
|
||
<p class="text-sm opacity-70 mb-4">Explora el catálogo y envía tu primera solicitud.</p>
|
||
<a href="/alumno/catalogo" class="btn btn-primary">Ir al catálogo</a>
|
||
</div>
|
||
)}
|
||
|
||
{prestamos.length > 0 && (
|
||
<div class="space-y-8">
|
||
<section>
|
||
<h2 class="text-lg font-semibold mb-3">Activos <span class="text-sm opacity-60" style="font-variant-numeric: tabular-nums;">({activos.length})</span></h2>
|
||
{activos.length === 0 ? (
|
||
<p class="text-sm opacity-70">Nada activo por ahora.</p>
|
||
) : (
|
||
<ul class="space-y-3">
|
||
{activos.map((p) => (
|
||
<li class="card">
|
||
<div class="flex items-start justify-between gap-3 flex-wrap">
|
||
<ul class="min-w-0 space-y-1">
|
||
{p.items.map((it) => (
|
||
<li class="leading-snug">
|
||
<span class="font-semibold" style="font-variant-numeric: tabular-nums;">{it.cantidad}×</span>{' '}
|
||
<span class="font-semibold">{it.material?.nombre ?? 'Material eliminado'}</span>
|
||
{it.material?.numero_inventario && (
|
||
<span class="text-xs opacity-60 font-mono ml-1.5">{it.material.numero_inventario}</span>
|
||
)}
|
||
{it.material_unidad?.etiqueta && (
|
||
<div class="text-xs opacity-70">Unidad: {it.material_unidad.etiqueta}</div>
|
||
)}
|
||
{it.descripcion && (
|
||
<p class="text-xs opacity-60 ml-0.5">{it.descripcion}</p>
|
||
)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<span class="text-xs font-medium px-2 py-1 rounded-[2px] whitespace-nowrap" style={badgeStyle(p.estado)}>
|
||
{estadoLabel[p.estado]}
|
||
</span>
|
||
</div>
|
||
<dl class="mt-3 grid grid-cols-2 gap-y-1 text-sm">
|
||
<dt class="opacity-60">Maestro responsable</dt>
|
||
<dd class="text-right truncate">{p.maestro_responsable}</dd>
|
||
<dt class="opacity-60">Solicitado</dt>
|
||
<dd class="text-right">{fmt(p.fecha_solicitud)}</dd>
|
||
{p.fecha_aprobacion && (
|
||
<>
|
||
<dt class="opacity-60">Aprobado</dt>
|
||
<dd class="text-right">{fmt(p.fecha_aprobacion)}</dd>
|
||
</>
|
||
)}
|
||
{p.fecha_devolucion_estimada && (
|
||
<>
|
||
<dt class="opacity-60">Devolver antes de</dt>
|
||
<dd class="text-right">{fmt(p.fecha_devolucion_estimada)}</dd>
|
||
</>
|
||
)}
|
||
</dl>
|
||
{p.notas && (
|
||
<p class="mt-3 text-sm opacity-75 border-l-2 pl-3" style="border-color: color-mix(in oklab, var(--color-ink) 15%, transparent);">
|
||
{p.notas}
|
||
</p>
|
||
)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</section>
|
||
|
||
<section>
|
||
<details open={historial.length <= 5}>
|
||
<summary class="text-lg font-semibold cursor-pointer list-none flex items-center gap-2">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M9 6l6 6-6 6" />
|
||
</svg>
|
||
Historial <span class="text-sm opacity-60" style="font-variant-numeric: tabular-nums;">({historial.length})</span>
|
||
</summary>
|
||
{historial.length === 0 ? (
|
||
<p class="text-sm opacity-70 mt-3">Sin historial todavía.</p>
|
||
) : (
|
||
<ul class="space-y-3 mt-3">
|
||
{historial.map((p) => (
|
||
<li class="card" style="opacity: 0.92;">
|
||
<div class="flex items-start justify-between gap-3 flex-wrap">
|
||
<ul class="min-w-0 space-y-1">
|
||
{p.items.map((it) => (
|
||
<li class="leading-snug">
|
||
<span class="font-semibold" style="font-variant-numeric: tabular-nums;">{it.cantidad}×</span>{' '}
|
||
<span class="font-semibold">{it.material?.nombre ?? 'Material eliminado'}</span>
|
||
{it.material?.numero_inventario && (
|
||
<span class="text-xs opacity-60 font-mono ml-1.5">{it.material.numero_inventario}</span>
|
||
)}
|
||
{it.descripcion && (
|
||
<p class="text-xs opacity-60 ml-0.5">{it.descripcion}</p>
|
||
)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<span class="text-xs font-medium px-2 py-1 rounded-[2px] whitespace-nowrap" style={badgeStyle(p.estado)}>
|
||
{estadoLabel[p.estado]}
|
||
</span>
|
||
</div>
|
||
<dl class="mt-3 grid grid-cols-2 gap-y-1 text-sm">
|
||
<dt class="opacity-60">Maestro responsable</dt>
|
||
<dd class="text-right truncate">{p.maestro_responsable}</dd>
|
||
<dt class="opacity-60">Solicitado</dt>
|
||
<dd class="text-right">{fmt(p.fecha_solicitud)}</dd>
|
||
{p.fecha_devolucion_real && (
|
||
<>
|
||
<dt class="opacity-60">Devuelto</dt>
|
||
<dd class="text-right">{fmt(p.fecha_devolucion_real)}</dd>
|
||
</>
|
||
)}
|
||
</dl>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</details>
|
||
</section>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</AppLayout>
|
||
|
||
<style>
|
||
details > summary::-webkit-details-marker { display: none; }
|
||
details[open] > summary > svg { transform: rotate(90deg); }
|
||
details > summary > svg {
|
||
transition: transform 150ms ease-out;
|
||
}
|
||
</style>
|