Sistema de préstamos LabRe UABC — implementación inicial
Sistema web para gestión de préstamos de material del Laboratorio de Sistemas Computacionales de la UABC. - Backend: Supabase self-hosted, schema aislado `prestamos` con RLS, triggers de stock y audit log (supabase/migrations/0001_init.sql). - Auth: Google OAuth restringido a @uabc.edu.mx, verificado en middleware y como segunda línea en trigger de DB. - Frontend: Astro 7 (SSR con adapter Node) + React islands + Tailwind v4 con paleta UABC (primary #00723F, secondary #DD971A) bajo regla 60/30/10. - Interfaz alumno mobile-first: catálogo con filtro por categorías, solicitud de préstamos, historial personal. - Interfaz admin desktop-first: panel con KPIs, bandeja de solicitudes (aprobar/rechazar/devolver), CRUD de inventario y categorías, reportes filtrables con export CSV nativo. - Modales con `<dialog>` nativo, cero librerías de UI adicionales. - Deploy: Dockerfile multi-stage node:22-alpine + docker-compose para publicar bajo prestamos.buglabs.dev vía Cloudflare Tunnel. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,96 @@
|
||||
---
|
||||
import AppLayout from '@/layouts/AppLayout.astro';
|
||||
|
||||
const supabase = Astro.locals.supabase;
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
|
||||
const [pend, activos, vencidos, agotados, ultimas] = await Promise.all([
|
||||
supabase.from('prestamos').select('*', { count: 'exact', head: true }).eq('estado', 'pendiente'),
|
||||
supabase.from('prestamos').select('*', { count: 'exact', head: true }).in('estado', ['aprobado', 'activo']),
|
||||
supabase.from('prestamos').select('*', { count: 'exact', head: true }).in('estado', ['aprobado', 'activo']).lt('fecha_devolucion_estimada', today),
|
||||
supabase.from('materiales').select('*', { count: 'exact', head: true }).eq('cantidad_disponible', 0),
|
||||
supabase
|
||||
.from('prestamos')
|
||||
.select('id, cantidad, fecha_solicitud, estado, alumno:profiles!alumno_id(nombre, email), material:materiales!material_id(nombre)')
|
||||
.order('fecha_solicitud', { ascending: false })
|
||||
.limit(5),
|
||||
]);
|
||||
|
||||
const fmtFecha = new Intl.DateTimeFormat('es-MX', { dateStyle: 'medium', timeStyle: 'short' });
|
||||
|
||||
const kpis = [
|
||||
{ label: 'Pendientes', value: pend.count ?? 0, href: '/admin/solicitudes', tone: 'primary' },
|
||||
{ label: 'En préstamo', value: activos.count ?? 0, href: '/admin/solicitudes/activos', tone: 'secondary' },
|
||||
{ label: 'Vencidos', value: vencidos.count ?? 0, href: '/admin/solicitudes/activos', tone: 'danger' },
|
||||
{ label: 'Agotados', value: agotados.count ?? 0, href: '/admin/inventario', tone: 'ink' },
|
||||
];
|
||||
|
||||
const estadoLabel: Record<string, string> = {
|
||||
pendiente: 'Pendiente',
|
||||
aprobado: 'En préstamo',
|
||||
activo: 'En préstamo',
|
||||
devuelto: 'Devuelto',
|
||||
rechazado: 'Rechazado',
|
||||
vencido: 'Vencido',
|
||||
};
|
||||
---
|
||||
<AppLayout title="Panel — LabPréstamos">
|
||||
<div class="max-w-6xl">
|
||||
<header class="mb-6">
|
||||
<h1 class="text-2xl md:text-3xl font-semibold">Panel</h1>
|
||||
<p class="text-sm opacity-70 mt-1">Resumen del laboratorio.</p>
|
||||
</header>
|
||||
|
||||
<section aria-label="Indicadores" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mb-8">
|
||||
{kpis.map((k) => (
|
||||
<a
|
||||
href={k.href}
|
||||
class="card block group focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--color-primary)] motion-safe:hover:-translate-y-0.5 transition-transform duration-150"
|
||||
>
|
||||
<div
|
||||
class="text-4xl font-semibold leading-none"
|
||||
style={`font-variant-numeric: tabular-nums; color: var(--color-${k.tone === 'ink' ? 'ink' : k.tone});`}
|
||||
>
|
||||
{k.value}
|
||||
</div>
|
||||
<div class="mt-2 text-sm opacity-70 group-hover:opacity-100 transition-opacity">{k.label}</div>
|
||||
</a>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="ultimas-h">
|
||||
<div class="flex items-baseline justify-between mb-3">
|
||||
<h2 id="ultimas-h" class="text-lg font-semibold">Últimas 5 solicitudes</h2>
|
||||
<a href="/admin/solicitudes" class="text-sm underline decoration-[color:var(--color-primary)] underline-offset-4">Ver todas</a>
|
||||
</div>
|
||||
<div class="card p-0 overflow-hidden">
|
||||
{ultimas.data && ultimas.data.length > 0 ? (
|
||||
<table class="w-full text-sm">
|
||||
<thead class="text-left" style="background: color-mix(in oklab, var(--color-ink) 4%, transparent);">
|
||||
<tr>
|
||||
<th class="p-3 font-medium">Alumno</th>
|
||||
<th class="p-3 font-medium">Material</th>
|
||||
<th class="p-3 font-medium">Cant.</th>
|
||||
<th class="p-3 font-medium">Estado</th>
|
||||
<th class="p-3 font-medium">Solicitado</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ultimas.data.map((r: any) => (
|
||||
<tr class="border-t" style="border-color: color-mix(in oklab, var(--color-ink) 10%, transparent);">
|
||||
<td class="p-3">{r.alumno?.nombre ?? r.alumno?.email ?? '—'}</td>
|
||||
<td class="p-3">{r.material?.nombre ?? '—'}</td>
|
||||
<td class="p-3" style="font-variant-numeric: tabular-nums;">{r.cantidad}</td>
|
||||
<td class="p-3">{estadoLabel[r.estado] ?? r.estado}</td>
|
||||
<td class="p-3 opacity-80">{fmtFecha.format(new Date(r.fecha_solicitud))}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<p class="p-6 opacity-70 text-sm">Aún no hay solicitudes registradas.</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</AppLayout>
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
import AppLayout from '@/layouts/AppLayout.astro';
|
||||
import CategoriaForm from '@/components/admin/inventario/CategoriaForm.tsx';
|
||||
import EliminarCategoria from '@/components/admin/inventario/EliminarCategoria.tsx';
|
||||
|
||||
type CategoriaRow = {
|
||||
id: number;
|
||||
nombre: string;
|
||||
materiales: { count: number }[];
|
||||
};
|
||||
|
||||
const { data, error } = await Astro.locals.supabase
|
||||
.from('categorias')
|
||||
.select('id, nombre, materiales(count)')
|
||||
.order('nombre');
|
||||
|
||||
const categorias = ((data ?? []) as unknown as CategoriaRow[]).map((c) => ({
|
||||
id: c.id,
|
||||
nombre: c.nombre,
|
||||
count: c.materiales?.[0]?.count ?? 0,
|
||||
}));
|
||||
---
|
||||
<AppLayout title="Categorías — Admin">
|
||||
<div class="max-w-4xl">
|
||||
<header class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-semibold">Categorías</h1>
|
||||
<p class="text-sm opacity-70 mt-1">Organiza los materiales por tipo.</p>
|
||||
</div>
|
||||
<CategoriaForm mode="create" client:load />
|
||||
</header>
|
||||
|
||||
<nav class="flex gap-2 mb-6 border-b" style="border-color: color-mix(in oklab, var(--color-ink) 10%, transparent);" aria-label="Sub-navegación de inventario">
|
||||
<a href="/admin/inventario" class="px-4 py-2 text-sm font-medium border-b-2 border-transparent opacity-70 transition-colors duration-150 hover:opacity-100">
|
||||
Materiales
|
||||
</a>
|
||||
<a href="/admin/inventario/categorias" class="px-4 py-2 text-sm font-medium border-b-2" style="border-color: var(--color-primary); color: var(--color-primary);">
|
||||
Categorías
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{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);">
|
||||
No se pudieron cargar las categorías. Recarga la página.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!error && categorias.length === 0 && (
|
||||
<div class="card text-center">
|
||||
<h2 class="text-lg font-semibold mb-1">Sin categorías aún</h2>
|
||||
<p class="text-sm opacity-70">Crea la primera para agrupar tus materiales.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!error && categorias.length > 0 && (
|
||||
<>
|
||||
<div class="hidden md:block card p-0 overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="text-left" style="background: color-mix(in oklab, var(--color-ink) 4%, transparent);">
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-medium">Nombre</th>
|
||||
<th class="px-4 py-3 font-medium text-right"># Materiales</th>
|
||||
<th class="px-4 py-3 font-medium text-right">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{categorias.map((c) => (
|
||||
<tr class="border-t" style="border-color: color-mix(in oklab, var(--color-ink) 8%, transparent);">
|
||||
<td class="px-4 py-3 font-medium">{c.nombre}</td>
|
||||
<td class="px-4 py-3 text-right" style="font-variant-numeric: tabular-nums;">
|
||||
{c.count > 0 ? (
|
||||
<a href={`/admin/inventario?cat=${c.id}`} class="underline" style="color: var(--color-primary);">
|
||||
{c.count}
|
||||
</a>
|
||||
) : (
|
||||
<span class="opacity-60">0</span>
|
||||
)}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex gap-2 justify-end">
|
||||
<CategoriaForm mode="edit" categoria={{ id: c.id, nombre: c.nombre }} client:load />
|
||||
<EliminarCategoria id={c.id} nombre={c.nombre} materialesCount={c.count} client:load />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="md:hidden flex flex-col gap-3">
|
||||
{categorias.map((c) => (
|
||||
<article class="card flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h3 class="font-semibold">{c.nombre}</h3>
|
||||
<p class="text-xs opacity-70 mt-1">
|
||||
{c.count > 0 ? (
|
||||
<a href={`/admin/inventario?cat=${c.id}`} class="underline" style="color: var(--color-primary);">
|
||||
{c.count} material{c.count === 1 ? '' : 'es'}
|
||||
</a>
|
||||
) : (
|
||||
<span>Sin materiales</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 shrink-0">
|
||||
<CategoriaForm mode="edit" categoria={{ id: c.id, nombre: c.nombre }} client:load />
|
||||
<EliminarCategoria id={c.id} nombre={c.nombre} materialesCount={c.count} client:load />
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
@@ -0,0 +1,240 @@
|
||||
---
|
||||
import AppLayout from '@/layouts/AppLayout.astro';
|
||||
import MaterialForm from '@/components/admin/inventario/MaterialForm.tsx';
|
||||
import EliminarMaterial from '@/components/admin/inventario/EliminarMaterial.tsx';
|
||||
|
||||
type Material = {
|
||||
id: number;
|
||||
nombre: string;
|
||||
descripcion: string | null;
|
||||
cantidad_total: number;
|
||||
cantidad_disponible: number;
|
||||
numero_inventario: string | null;
|
||||
estado: 'disponible' | 'mantenimiento' | 'baja';
|
||||
categoria: { id: number; nombre: string } | null;
|
||||
};
|
||||
|
||||
const q = (Astro.url.searchParams.get('q') ?? '').trim();
|
||||
const catRaw = Astro.url.searchParams.get('cat') ?? '';
|
||||
const catId = catRaw && /^\d+$/.test(catRaw) ? Number(catRaw) : null;
|
||||
const estadoRaw = Astro.url.searchParams.get('estado') ?? '';
|
||||
const estado = ['disponible', 'mantenimiento', 'baja'].includes(estadoRaw) ? estadoRaw : '';
|
||||
|
||||
let query = Astro.locals.supabase
|
||||
.from('materiales')
|
||||
.select(
|
||||
'id, nombre, descripcion, cantidad_total, cantidad_disponible, numero_inventario, estado, categoria:categorias(id, nombre)',
|
||||
);
|
||||
|
||||
if (q) query = query.or(`nombre.ilike.%${q}%,numero_inventario.ilike.%${q}%`);
|
||||
if (catId != null) query = query.eq('categoria_id', catId);
|
||||
if (estado) query = query.eq('estado', estado);
|
||||
|
||||
const { data: matData, error: matError } = await query.order('nombre');
|
||||
const materiales = (matData ?? []) as unknown as Material[];
|
||||
|
||||
const { data: catData } = await Astro.locals.supabase
|
||||
.from('categorias')
|
||||
.select('id, nombre')
|
||||
.order('nombre');
|
||||
const categorias = (catData ?? []) as { id: number; nombre: string }[];
|
||||
|
||||
const estadoBadge = (e: Material['estado']) => {
|
||||
if (e === 'disponible')
|
||||
return {
|
||||
label: 'Disponible',
|
||||
style: 'background: color-mix(in oklab, var(--color-primary) 12%, transparent); color: var(--color-primary);',
|
||||
};
|
||||
if (e === 'mantenimiento')
|
||||
return {
|
||||
label: 'Mantenimiento',
|
||||
style: 'background: color-mix(in oklab, var(--color-secondary) 15%, transparent); color: var(--color-secondary-hover);',
|
||||
};
|
||||
return {
|
||||
label: 'Baja',
|
||||
style: 'background: color-mix(in oklab, var(--color-ink) 8%, transparent); color: color-mix(in oklab, var(--color-ink) 60%, transparent);',
|
||||
};
|
||||
};
|
||||
---
|
||||
<AppLayout title="Inventario — Admin">
|
||||
<div class="max-w-6xl">
|
||||
<header class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-semibold">Inventario</h1>
|
||||
<p class="text-sm opacity-70 mt-1">Materiales del laboratorio.</p>
|
||||
</div>
|
||||
<MaterialForm mode="create" categorias={categorias} client:load />
|
||||
</header>
|
||||
|
||||
<nav class="flex gap-2 mb-6 border-b" style="border-color: color-mix(in oklab, var(--color-ink) 10%, transparent);" aria-label="Sub-navegación de inventario">
|
||||
<a href="/admin/inventario" class="px-4 py-2 text-sm font-medium border-b-2" style="border-color: var(--color-primary); color: var(--color-primary);">
|
||||
Materiales
|
||||
</a>
|
||||
<a href="/admin/inventario/categorias" class="px-4 py-2 text-sm font-medium border-b-2 border-transparent opacity-70 transition-colors duration-150 hover:opacity-100">
|
||||
Categorías
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<form method="GET" class="card mb-6 grid grid-cols-1 sm:grid-cols-4 gap-3" role="search">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="label" for="filtro-q">Buscar</label>
|
||||
<input id="filtro-q" name="q" type="search" class="input" value={q} placeholder="Nombre o Nº inventario…" autocomplete="off" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="label" for="filtro-cat">Categoría</label>
|
||||
<select id="filtro-cat" name="cat" class="input">
|
||||
<option value="">Todas</option>
|
||||
{categorias.map((c) => (
|
||||
<option value={String(c.id)} selected={catId === c.id}>{c.nombre}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="label" for="filtro-estado">Estado</label>
|
||||
<select id="filtro-estado" name="estado" class="input">
|
||||
<option value="">Todos</option>
|
||||
<option value="disponible" selected={estado === 'disponible'}>Disponible</option>
|
||||
<option value="mantenimiento" selected={estado === 'mantenimiento'}>Mantenimiento</option>
|
||||
<option value="baja" selected={estado === 'baja'}>Baja</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="sm:col-span-4 flex gap-2 justify-end">
|
||||
{(q || catId != null || estado) && (
|
||||
<a href="/admin/inventario" class="btn btn-ghost">Limpiar</a>
|
||||
)}
|
||||
<button type="submit" class="btn btn-primary">Filtrar</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{matError && (
|
||||
<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);">
|
||||
No se pudo cargar el inventario. Recarga la página.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!matError && materiales.length === 0 && (
|
||||
<div class="card text-center">
|
||||
<h2 class="text-lg font-semibold mb-1">Sin resultados</h2>
|
||||
<p class="text-sm opacity-70">
|
||||
{q || catId != null || estado
|
||||
? 'Ningún material coincide con los filtros. Ajusta la búsqueda.'
|
||||
: 'Aún no hay material registrado. Agrega uno para comenzar.'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!matError && materiales.length > 0 && (
|
||||
<>
|
||||
<div class="hidden md:block card p-0 overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="text-left" style="background: color-mix(in oklab, var(--color-ink) 4%, transparent);">
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-medium">Nombre</th>
|
||||
<th class="px-4 py-3 font-medium">Categoría</th>
|
||||
<th class="px-4 py-3 font-medium">Nº inventario</th>
|
||||
<th class="px-4 py-3 font-medium text-right">Stock</th>
|
||||
<th class="px-4 py-3 font-medium">Estado</th>
|
||||
<th class="px-4 py-3 font-medium text-right">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{materiales.map((m) => {
|
||||
const badge = estadoBadge(m.estado);
|
||||
return (
|
||||
<tr class="border-t" style="border-color: color-mix(in oklab, var(--color-ink) 8%, transparent);">
|
||||
<td class="px-4 py-3">
|
||||
<div class="font-medium">{m.nombre}</div>
|
||||
{m.descripcion && (
|
||||
<div class="text-xs opacity-60 line-clamp-1">{m.descripcion}</div>
|
||||
)}
|
||||
</td>
|
||||
<td class="px-4 py-3 opacity-80">{m.categoria?.nombre ?? '—'}</td>
|
||||
<td class="px-4 py-3 font-mono text-xs opacity-80">{m.numero_inventario ?? '—'}</td>
|
||||
<td class="px-4 py-3 text-right" style="font-variant-numeric: tabular-nums;">
|
||||
{m.cantidad_disponible} / {m.cantidad_total}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="text-xs px-2 py-0.5 rounded-full whitespace-nowrap" style={badge.style}>
|
||||
{badge.label}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex gap-2 justify-end">
|
||||
<MaterialForm
|
||||
mode="edit"
|
||||
material={{
|
||||
id: m.id,
|
||||
nombre: m.nombre,
|
||||
categoria_id: m.categoria?.id ?? null,
|
||||
descripcion: m.descripcion,
|
||||
cantidad_total: m.cantidad_total,
|
||||
cantidad_disponible: m.cantidad_disponible,
|
||||
numero_inventario: m.numero_inventario,
|
||||
estado: m.estado,
|
||||
}}
|
||||
categorias={categorias}
|
||||
client:load
|
||||
/>
|
||||
<EliminarMaterial id={m.id} nombre={m.nombre} client:load />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="md:hidden flex flex-col gap-3">
|
||||
{materiales.map((m) => {
|
||||
const badge = estadoBadge(m.estado);
|
||||
return (
|
||||
<article class="card flex flex-col gap-3">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<h3 class="font-semibold leading-snug">{m.nombre}</h3>
|
||||
{m.categoria && (
|
||||
<p class="text-xs opacity-70 mt-0.5">{m.categoria.nombre}</p>
|
||||
)}
|
||||
</div>
|
||||
<span class="text-xs px-2 py-0.5 rounded-full whitespace-nowrap" style={badge.style}>
|
||||
{badge.label}
|
||||
</span>
|
||||
</div>
|
||||
{m.descripcion && <p class="text-sm opacity-75 line-clamp-2">{m.descripcion}</p>}
|
||||
<dl class="text-xs opacity-70 grid grid-cols-2 gap-1">
|
||||
<dt class="opacity-60">Inventario</dt>
|
||||
<dd class="text-right font-mono">{m.numero_inventario ?? '—'}</dd>
|
||||
<dt class="opacity-60">Stock</dt>
|
||||
<dd class="text-right" style="font-variant-numeric: tabular-nums;">
|
||||
{m.cantidad_disponible} / {m.cantidad_total}
|
||||
</dd>
|
||||
</dl>
|
||||
<div class="flex gap-2 justify-end mt-auto">
|
||||
<MaterialForm
|
||||
mode="edit"
|
||||
material={{
|
||||
id: m.id,
|
||||
nombre: m.nombre,
|
||||
categoria_id: m.categoria?.id ?? null,
|
||||
descripcion: m.descripcion,
|
||||
cantidad_total: m.cantidad_total,
|
||||
cantidad_disponible: m.cantidad_disponible,
|
||||
numero_inventario: m.numero_inventario,
|
||||
estado: m.estado,
|
||||
}}
|
||||
categorias={categorias}
|
||||
client:load
|
||||
/>
|
||||
<EliminarMaterial id={m.id} nombre={m.nombre} client:load />
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
@@ -0,0 +1,397 @@
|
||||
---
|
||||
import AppLayout from '@/layouts/AppLayout.astro';
|
||||
import AutocompleteMaterial from '@/components/admin/reportes/AutocompleteMaterial';
|
||||
import AutocompleteAlumno from '@/components/admin/reportes/AutocompleteAlumno';
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
const supabase = Astro.locals.supabase;
|
||||
const sp = Astro.url.searchParams;
|
||||
|
||||
const vista = sp.get('vista') === 'vencidos' ? 'vencidos' : 'historial';
|
||||
const desde = sp.get('desde') ?? '';
|
||||
const hasta = sp.get('hasta') ?? '';
|
||||
const estado = sp.get('estado') ?? 'all';
|
||||
const materialId = sp.get('material_id') ?? '';
|
||||
const alumnoId = sp.get('alumno_id') ?? '';
|
||||
|
||||
const HARD_LIMIT = 500;
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
|
||||
const fmtFecha = new Intl.DateTimeFormat('es-MX', { dateStyle: 'medium' });
|
||||
const estadoLabel: Record<string, string> = {
|
||||
pendiente: 'Pendiente',
|
||||
aprobado: 'Aprobado',
|
||||
activo: 'En préstamo',
|
||||
devuelto: 'Devuelto',
|
||||
rechazado: 'Rechazado',
|
||||
vencido: 'Vencido',
|
||||
};
|
||||
|
||||
function fmt(d: string | null | undefined): string {
|
||||
if (!d) return '—';
|
||||
const x = new Date(d);
|
||||
return isNaN(x.getTime()) ? '—' : fmtFecha.format(x);
|
||||
}
|
||||
|
||||
// Prefetch de labels para hidratar autocompletes con valor inicial (SSR-friendly)
|
||||
let materialInitialLabel: string | null = null;
|
||||
if (materialId) {
|
||||
const { data } = await supabase
|
||||
.from('materiales')
|
||||
.select('nombre, numero_inventario')
|
||||
.eq('id', materialId)
|
||||
.maybeSingle();
|
||||
if (data) materialInitialLabel = data.numero_inventario ? `${data.nombre} — ${data.numero_inventario}` : data.nombre;
|
||||
}
|
||||
let alumnoInitialLabel: string | null = null;
|
||||
if (alumnoId) {
|
||||
const { data } = await supabase
|
||||
.from('profiles')
|
||||
.select('nombre, email, matricula')
|
||||
.eq('id', alumnoId)
|
||||
.maybeSingle();
|
||||
if (data) {
|
||||
const mat = data.matricula ? ` (${data.matricula})` : '';
|
||||
alumnoInitialLabel = `${data.nombre ?? data.email}${mat} — ${data.email}`;
|
||||
}
|
||||
}
|
||||
|
||||
// —— HISTORIAL ——
|
||||
let filas: any[] = [];
|
||||
let total = 0;
|
||||
let hitLimit = false;
|
||||
|
||||
if (vista === 'historial') {
|
||||
let q = supabase
|
||||
.from('prestamos')
|
||||
.select(`
|
||||
id, cantidad, fecha_solicitud, fecha_aprobacion, fecha_devolucion_estimada, fecha_devolucion_real, estado,
|
||||
alumno:profiles!alumno_id(nombre, email, matricula),
|
||||
material:materiales!material_id(nombre, numero_inventario)
|
||||
`)
|
||||
.order('fecha_solicitud', { ascending: false })
|
||||
// ponytail: 500, paginar cuando reportes rutinarios pasen de eso
|
||||
.limit(HARD_LIMIT);
|
||||
|
||||
if (desde) q = q.gte('fecha_solicitud', desde);
|
||||
// ponytail: bound de día en UTC; cambiar a bounds tz-aware si el reporte cruza medianoche PST/PDT
|
||||
if (hasta) q = q.lte('fecha_solicitud', `${hasta}T23:59:59.999Z`);
|
||||
if (estado && estado !== 'all') q = q.eq('estado', estado);
|
||||
if (materialId) q = q.eq('material_id', materialId);
|
||||
if (alumnoId) q = q.eq('alumno_id', alumnoId);
|
||||
|
||||
const { data, error } = await q;
|
||||
if (error) console.error('[reportes/historial]', error);
|
||||
filas = data ?? [];
|
||||
total = filas.length;
|
||||
hitLimit = total >= HARD_LIMIT;
|
||||
}
|
||||
|
||||
// —— VENCIDOS ——
|
||||
let vencidos: any[] = [];
|
||||
if (vista === 'vencidos') {
|
||||
const { data, error } = await supabase
|
||||
.from('prestamos')
|
||||
.select(`
|
||||
id, cantidad, fecha_devolucion_estimada,
|
||||
alumno:profiles!alumno_id(nombre, email, matricula),
|
||||
material:materiales!material_id(nombre, numero_inventario)
|
||||
`)
|
||||
.in('estado', ['aprobado', 'activo'])
|
||||
.lt('fecha_devolucion_estimada', today)
|
||||
.order('fecha_devolucion_estimada', { ascending: true });
|
||||
if (error) console.error('[reportes/vencidos]', error);
|
||||
vencidos = data ?? [];
|
||||
}
|
||||
|
||||
function diasAtraso(fecha: string): number {
|
||||
const d = new Date(fecha);
|
||||
const t = new Date(today);
|
||||
return Math.floor((t.getTime() - d.getTime()) / 86_400_000);
|
||||
}
|
||||
|
||||
// URL del export = mismos filtros
|
||||
const exportQs = new URLSearchParams();
|
||||
if (desde) exportQs.set('desde', desde);
|
||||
if (hasta) exportQs.set('hasta', hasta);
|
||||
if (estado && estado !== 'all') exportQs.set('estado', estado);
|
||||
if (materialId) exportQs.set('material_id', materialId);
|
||||
if (alumnoId) exportQs.set('alumno_id', alumnoId);
|
||||
const exportHref = `/api/admin/reportes/export${exportQs.toString() ? `?${exportQs}` : ''}`;
|
||||
const exportFilename = `reporte-${today}.csv`;
|
||||
---
|
||||
<AppLayout title="Reportes — LabPréstamos">
|
||||
<div class="max-w-6xl">
|
||||
<header class="mb-6">
|
||||
<h1 class="text-2xl md:text-3xl font-semibold">Reportes</h1>
|
||||
<p class="text-sm opacity-70 mt-1">Historial filtrable de préstamos y lista de vencidos.</p>
|
||||
</header>
|
||||
|
||||
<nav class="mb-6 border-b" style="border-color: color-mix(in oklab, var(--color-ink) 12%, transparent);" aria-label="Vistas de reportes">
|
||||
<ul class="flex gap-1">
|
||||
<li>
|
||||
<a
|
||||
href="?vista=historial"
|
||||
aria-current={vista === 'historial' ? 'page' : undefined}
|
||||
class:list={['tab', vista === 'historial' && 'tab-active']}
|
||||
>Historial</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="?vista=vencidos"
|
||||
aria-current={vista === 'vencidos' ? 'page' : undefined}
|
||||
class:list={['tab', vista === 'vencidos' && 'tab-active']}
|
||||
>Vencidos</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{vista === 'historial' && (
|
||||
<>
|
||||
<form method="get" class="card mb-6">
|
||||
<input type="hidden" name="vista" value="historial" />
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label class="label" for="desde">Desde</label>
|
||||
<input class="input" type="date" id="desde" name="desde" value={desde} />
|
||||
</div>
|
||||
<div>
|
||||
<label class="label" for="hasta">Hasta</label>
|
||||
<input class="input" type="date" id="hasta" name="hasta" value={hasta} />
|
||||
</div>
|
||||
<div>
|
||||
<label class="label" for="estado">Estado</label>
|
||||
<select class="input" id="estado" name="estado">
|
||||
<option value="all" selected={estado === 'all'}>Todos</option>
|
||||
<option value="pendiente" selected={estado === 'pendiente'}>Pendiente</option>
|
||||
<option value="aprobado" selected={estado === 'aprobado'}>Aprobado</option>
|
||||
<option value="activo" selected={estado === 'activo'}>En préstamo</option>
|
||||
<option value="devuelto" selected={estado === 'devuelto'}>Devuelto</option>
|
||||
<option value="rechazado" selected={estado === 'rechazado'}>Rechazado</option>
|
||||
<option value="vencido" selected={estado === 'vencido'}>Vencido</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<AutocompleteMaterial
|
||||
client:load
|
||||
initialValue={materialId ? Number(materialId) : null}
|
||||
initialLabel={materialInitialLabel}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<AutocompleteAlumno
|
||||
client:load
|
||||
initialValue={alumnoId || null}
|
||||
initialLabel={alumnoInitialLabel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 flex flex-col md:flex-row md:items-center gap-3 md:justify-between">
|
||||
<div class="flex flex-col md:flex-row gap-2">
|
||||
<button type="submit" class="btn btn-primary">Filtrar</button>
|
||||
<a href="/admin/reportes?vista=historial" class="btn btn-ghost">Limpiar</a>
|
||||
</div>
|
||||
<a
|
||||
class="btn btn-secondary w-full md:w-auto"
|
||||
href={exportHref}
|
||||
download={exportFilename}
|
||||
>
|
||||
Exportar CSV
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{hitLimit && (
|
||||
<div
|
||||
role="status"
|
||||
class="mb-4 rounded-lg p-3 text-sm"
|
||||
style="background: color-mix(in oklab, var(--color-secondary) 12%, transparent); border: 1px solid color-mix(in oklab, var(--color-secondary) 30%, transparent);"
|
||||
>
|
||||
Se muestran los {HARD_LIMIT} más recientes — refina los filtros o exporta a CSV.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{filas.length === 0 ? (
|
||||
<div class="card text-center">
|
||||
<p class="opacity-75">Sin resultados para los filtros seleccionados.</p>
|
||||
<p class="text-sm opacity-60 mt-1">Ajusta los filtros o exporta todo el historial.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Desktop: tabla */}
|
||||
<div class="card p-0 overflow-hidden hidden md:block">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="text-left" style="background: color-mix(in oklab, var(--color-ink) 4%, transparent);">
|
||||
<tr>
|
||||
<th class="p-3 font-medium">Fecha solicitud</th>
|
||||
<th class="p-3 font-medium">Alumno</th>
|
||||
<th class="p-3 font-medium">Material</th>
|
||||
<th class="p-3 font-medium">Cant.</th>
|
||||
<th class="p-3 font-medium">Estado</th>
|
||||
<th class="p-3 font-medium">Fecha devolución</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filas.map((r: any) => (
|
||||
<tr class="border-t" style="border-color: color-mix(in oklab, var(--color-ink) 10%, transparent);">
|
||||
<td class="p-3 opacity-90 whitespace-nowrap">{fmt(r.fecha_solicitud)}</td>
|
||||
<td class="p-3">
|
||||
<div class="font-medium">{r.alumno?.nombre ?? r.alumno?.email ?? '—'}</div>
|
||||
{r.alumno?.matricula && <div class="text-xs opacity-70">{r.alumno.matricula}</div>}
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<div>{r.material?.nombre ?? '—'}</div>
|
||||
{r.material?.numero_inventario && (
|
||||
<div class="text-xs opacity-70">{r.material.numero_inventario}</div>
|
||||
)}
|
||||
</td>
|
||||
<td class="p-3" style="font-variant-numeric: tabular-nums;">{r.cantidad}</td>
|
||||
<td class="p-3">{estadoLabel[r.estado] ?? r.estado}</td>
|
||||
<td class="p-3 opacity-90 whitespace-nowrap">
|
||||
{fmt(r.fecha_devolucion_real ?? r.fecha_devolucion_estimada)}
|
||||
{!r.fecha_devolucion_real && r.fecha_devolucion_estimada && (
|
||||
<span class="text-xs opacity-60"> (est.)</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="border-t" style="border-color: color-mix(in oklab, var(--color-ink) 15%, transparent); background: color-mix(in oklab, var(--color-ink) 3%, transparent);">
|
||||
<td class="p-3 text-sm font-medium" colspan="6">
|
||||
Total: <span style="font-variant-numeric: tabular-nums;">{total}</span> {total === 1 ? 'préstamo' : 'préstamos'}
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile: cards apiladas */}
|
||||
<ul class="md:hidden space-y-3">
|
||||
{filas.map((r: any) => (
|
||||
<li class="card">
|
||||
<div class="flex items-baseline justify-between gap-3">
|
||||
<span class="text-xs opacity-70">{fmt(r.fecha_solicitud)}</span>
|
||||
<span class="text-xs font-medium">{estadoLabel[r.estado] ?? r.estado}</span>
|
||||
</div>
|
||||
<div class="mt-1 font-medium">{r.material?.nombre ?? '—'}</div>
|
||||
<div class="text-sm opacity-80">
|
||||
{r.alumno?.nombre ?? r.alumno?.email ?? '—'}
|
||||
{r.alumno?.matricula && <span class="opacity-60"> · {r.alumno.matricula}</span>}
|
||||
</div>
|
||||
<div class="mt-2 flex items-center justify-between text-sm">
|
||||
<span style="font-variant-numeric: tabular-nums;">Cant. {r.cantidad}</span>
|
||||
<span class="opacity-80">
|
||||
Dev.: {fmt(r.fecha_devolucion_real ?? r.fecha_devolucion_estimada)}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
<li class="text-center text-sm opacity-70 pt-1">Total: {total} {total === 1 ? 'préstamo' : 'préstamos'}</li>
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{vista === 'vencidos' && (
|
||||
<>
|
||||
{vencidos.length === 0 ? (
|
||||
<div class="card text-center">
|
||||
<p class="opacity-75">No hay préstamos vencidos. Todo al día.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div class="card p-0 overflow-hidden hidden md:block">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="text-left" style="background: color-mix(in oklab, var(--color-ink) 4%, transparent);">
|
||||
<tr>
|
||||
<th class="p-3 font-medium">Alumno</th>
|
||||
<th class="p-3 font-medium">Material</th>
|
||||
<th class="p-3 font-medium">Cant.</th>
|
||||
<th class="p-3 font-medium">Debía devolver el</th>
|
||||
<th class="p-3 font-medium">Días de atraso</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{vencidos.map((r: any) => {
|
||||
const dias = diasAtraso(r.fecha_devolucion_estimada);
|
||||
return (
|
||||
<tr
|
||||
class="border-t"
|
||||
style="border-color: color-mix(in oklab, var(--color-ink) 10%, transparent); background: color-mix(in oklab, var(--color-danger) 8%, transparent);"
|
||||
>
|
||||
<td class="p-3">
|
||||
<div class="font-medium">{r.alumno?.nombre ?? r.alumno?.email ?? '—'}</div>
|
||||
{r.alumno?.matricula && <div class="text-xs opacity-70">{r.alumno.matricula}</div>}
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<div>{r.material?.nombre ?? '—'}</div>
|
||||
{r.material?.numero_inventario && (
|
||||
<div class="text-xs opacity-70">{r.material.numero_inventario}</div>
|
||||
)}
|
||||
</td>
|
||||
<td class="p-3" style="font-variant-numeric: tabular-nums;">{r.cantidad}</td>
|
||||
<td class="p-3 whitespace-nowrap">{fmt(r.fecha_devolucion_estimada)}</td>
|
||||
<td class="p-3 font-medium" style={`font-variant-numeric: tabular-nums; color: var(--color-danger);`}>
|
||||
{dias} {dias === 1 ? 'día' : 'días'}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="md:hidden space-y-3">
|
||||
{vencidos.map((r: any) => {
|
||||
const dias = diasAtraso(r.fecha_devolucion_estimada);
|
||||
return (
|
||||
<li class="card" style="background: color-mix(in oklab, var(--color-danger) 8%, transparent);">
|
||||
<div class="font-medium">{r.material?.nombre ?? '—'}</div>
|
||||
<div class="text-sm opacity-80">
|
||||
{r.alumno?.nombre ?? r.alumno?.email ?? '—'}
|
||||
{r.alumno?.matricula && <span class="opacity-60"> · {r.alumno.matricula}</span>}
|
||||
</div>
|
||||
<div class="mt-2 flex items-center justify-between text-sm">
|
||||
<span>Debía devolver el {fmt(r.fecha_devolucion_estimada)}</span>
|
||||
<span class="font-medium" style="font-variant-numeric: tabular-nums; color: var(--color-danger);">
|
||||
{dias} {dias === 1 ? 'día' : 'días'}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
<style>
|
||||
@reference "tailwindcss";
|
||||
.tab {
|
||||
@apply inline-block px-4 py-2.5 text-sm font-medium rounded-t-lg
|
||||
transition-[background-color,color,border-color] duration-150
|
||||
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--color-primary)];
|
||||
color: color-mix(in oklab, var(--color-ink) 70%, transparent);
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.tab:hover {
|
||||
color: var(--color-ink);
|
||||
background: color-mix(in oklab, var(--color-ink) 4%, transparent);
|
||||
}
|
||||
.tab-active {
|
||||
color: var(--color-primary);
|
||||
border-bottom-color: var(--color-primary);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
import AppLayout from '@/layouts/AppLayout.astro';
|
||||
import MarcarDevuelto from '@/components/admin/solicitudes/MarcarDevuelto.tsx';
|
||||
import VerDetalles from '@/components/admin/solicitudes/VerDetalles.tsx';
|
||||
|
||||
const supabase = Astro.locals.supabase;
|
||||
const { data, error } = await supabase
|
||||
.from('prestamos')
|
||||
.select(
|
||||
'id, cantidad, fecha_solicitud, fecha_aprobacion, fecha_devolucion_estimada, notas, alumno:profiles!alumno_id(id, nombre, email, matricula), material:materiales!material_id(id, nombre, numero_inventario, cantidad_disponible)'
|
||||
)
|
||||
.in('estado', ['aprobado', 'activo'])
|
||||
.order('fecha_devolucion_estimada', { ascending: true });
|
||||
|
||||
const filas = data ?? [];
|
||||
const fmtFecha = new Intl.DateTimeFormat('es-MX', { dateStyle: 'medium' });
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
const isVencido = (f?: string | null) => !!f && f < today;
|
||||
|
||||
const path = Astro.url.pathname;
|
||||
const tabs = [
|
||||
{ href: '/admin/solicitudes', label: 'Pendientes' },
|
||||
{ href: '/admin/solicitudes/activos', label: 'En préstamo' },
|
||||
{ href: '/admin/solicitudes/historial', label: 'Historial' },
|
||||
];
|
||||
---
|
||||
<AppLayout title="Préstamos activos — LabPréstamos">
|
||||
<div class="max-w-6xl">
|
||||
<header class="mb-4">
|
||||
<div class="flex items-center gap-3 flex-wrap">
|
||||
<h1 class="text-2xl md:text-3xl font-semibold">En préstamo</h1>
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-semibold"
|
||||
style="background: color-mix(in oklab, var(--color-primary) 12%, transparent); color: var(--color-primary); font-variant-numeric: tabular-nums;"
|
||||
aria-label={`${filas.length} préstamos activos`}
|
||||
>
|
||||
{filas.length}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav aria-label="Vistas de solicitudes" class="mb-6 border-b flex gap-1 overflow-x-auto" style="border-color: color-mix(in oklab, var(--color-ink) 12%, transparent);">
|
||||
{tabs.map((t) => {
|
||||
const active = path === t.href;
|
||||
return (
|
||||
<a
|
||||
href={t.href}
|
||||
class:list={['px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 transition-colors -mb-px', active ? 'text-[color:var(--color-primary)]' : 'opacity-70 hover:opacity-100 border-transparent']}
|
||||
style={active ? 'border-color: var(--color-primary);' : ''}
|
||||
aria-current={active ? 'page' : undefined}
|
||||
>
|
||||
{t.label}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{error && (
|
||||
<div role="alert" class="mb-4 rounded-lg p-3 text-sm" style="background: color-mix(in oklab, var(--color-danger) 12%, transparent); color: var(--color-danger);">
|
||||
Error cargando préstamos: {error.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{filas.length === 0 ? (
|
||||
<div class="card text-center py-12">
|
||||
<p class="font-medium">No hay préstamos activos.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div class="card p-0 overflow-hidden hidden md:block">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="text-left" style="background: color-mix(in oklab, var(--color-ink) 4%, transparent);">
|
||||
<tr>
|
||||
<th class="p-3 font-medium">Alumno</th>
|
||||
<th class="p-3 font-medium">Material</th>
|
||||
<th class="p-3 font-medium">Cant.</th>
|
||||
<th class="p-3 font-medium">Aprobado</th>
|
||||
<th class="p-3 font-medium">Devolver antes de</th>
|
||||
<th class="p-3 font-medium text-right">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filas.map((r: any) => {
|
||||
const vencido = isVencido(r.fecha_devolucion_estimada);
|
||||
return (
|
||||
<tr
|
||||
class="border-t align-top"
|
||||
style={`border-color: color-mix(in oklab, var(--color-ink) 10%, transparent); ${vencido ? 'background: color-mix(in oklab, var(--color-danger) 8%, transparent);' : ''}`}
|
||||
>
|
||||
<td class="p-3">
|
||||
<div class="font-medium">{r.alumno?.nombre ?? '—'}</div>
|
||||
<div class="text-xs opacity-70">{r.alumno?.matricula ?? ''} {r.alumno?.email ? `· ${r.alumno.email}` : ''}</div>
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<div>{r.material?.nombre ?? '—'}</div>
|
||||
<div class="text-xs opacity-70">Inv. {r.material?.numero_inventario ?? '—'}</div>
|
||||
</td>
|
||||
<td class="p-3" style="font-variant-numeric: tabular-nums;">{r.cantidad}</td>
|
||||
<td class="p-3 opacity-80">{r.fecha_aprobacion ? fmtFecha.format(new Date(r.fecha_aprobacion)) : '—'}</td>
|
||||
<td class="p-3">
|
||||
<span style="font-variant-numeric: tabular-nums;">
|
||||
{r.fecha_devolucion_estimada ? fmtFecha.format(new Date(r.fecha_devolucion_estimada + 'T00:00:00')) : '—'}
|
||||
</span>
|
||||
{vencido && (
|
||||
<span
|
||||
class="ml-2 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold"
|
||||
style="background: var(--color-danger); color: white;"
|
||||
>
|
||||
Vencido
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<div class="flex justify-end gap-2 flex-wrap">
|
||||
<VerDetalles client:load prestamoId={r.id} />
|
||||
<MarcarDevuelto client:load prestamoId={r.id} nombreMaterial={r.material?.nombre ?? '—'} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<ul class="md:hidden flex flex-col gap-3">
|
||||
{filas.map((r: any) => {
|
||||
const vencido = isVencido(r.fecha_devolucion_estimada);
|
||||
return (
|
||||
<li class="card" style={vencido ? 'background: color-mix(in oklab, var(--color-danger) 8%, white);' : ''}>
|
||||
<div class="flex items-baseline justify-between gap-2">
|
||||
<div class="font-medium">{r.alumno?.nombre ?? '—'}</div>
|
||||
{vencido && (
|
||||
<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-semibold" style="background: var(--color-danger); color: white;">Vencido</span>
|
||||
)}
|
||||
</div>
|
||||
<div class="text-xs opacity-70 mb-2">{r.alumno?.matricula ?? ''} {r.alumno?.email ? `· ${r.alumno.email}` : ''}</div>
|
||||
<div class="text-sm">{r.material?.nombre ?? '—'} <span class="opacity-70">· Inv. {r.material?.numero_inventario ?? '—'}</span></div>
|
||||
<div class="text-sm mt-1">Cantidad: <strong style="font-variant-numeric: tabular-nums;">{r.cantidad}</strong></div>
|
||||
<div class="text-sm mt-1 opacity-80">Devolver antes de <span style="font-variant-numeric: tabular-nums;">{r.fecha_devolucion_estimada ? fmtFecha.format(new Date(r.fecha_devolucion_estimada + 'T00:00:00')) : '—'}</span></div>
|
||||
<div class="mt-3 flex gap-2 flex-wrap">
|
||||
<VerDetalles client:load prestamoId={r.id} />
|
||||
<MarcarDevuelto client:load prestamoId={r.id} nombreMaterial={r.material?.nombre ?? '—'} />
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
@@ -0,0 +1,151 @@
|
||||
---
|
||||
import AppLayout from '@/layouts/AppLayout.astro';
|
||||
|
||||
const supabase = Astro.locals.supabase;
|
||||
|
||||
const ALL = ['devuelto', 'rechazado', 'vencido'] as const;
|
||||
type EstadoHist = typeof ALL[number];
|
||||
const raw = Astro.url.searchParams.get('estado');
|
||||
const estadoFiltro = (raw && (ALL as readonly string[]).includes(raw) ? raw : '') as EstadoHist | '';
|
||||
const estados = estadoFiltro ? [estadoFiltro] : Array.from(ALL);
|
||||
|
||||
// ponytail: limit 200, paginar cuando pase de 500 filas
|
||||
const { data, error } = await supabase
|
||||
.from('prestamos')
|
||||
.select(
|
||||
'id, cantidad, fecha_solicitud, fecha_devolucion_real, estado, notas, alumno:profiles!alumno_id(id, nombre, email, matricula), material:materiales!material_id(id, nombre, numero_inventario)'
|
||||
)
|
||||
.in('estado', estados)
|
||||
.order('fecha_solicitud', { ascending: false })
|
||||
.limit(200);
|
||||
|
||||
const filas = data ?? [];
|
||||
const fmtFecha = new Intl.DateTimeFormat('es-MX', { dateStyle: 'medium', timeStyle: 'short' });
|
||||
|
||||
const path = Astro.url.pathname;
|
||||
const tabs = [
|
||||
{ href: '/admin/solicitudes', label: 'Pendientes' },
|
||||
{ href: '/admin/solicitudes/activos', label: 'En préstamo' },
|
||||
{ href: '/admin/solicitudes/historial', label: 'Historial' },
|
||||
];
|
||||
|
||||
const estadoLabel: Record<string, string> = {
|
||||
devuelto: 'Devuelto',
|
||||
rechazado: 'Rechazado',
|
||||
vencido: 'Vencido',
|
||||
};
|
||||
---
|
||||
<AppLayout title="Historial de solicitudes — LabPréstamos">
|
||||
<div class="max-w-6xl">
|
||||
<header class="mb-4">
|
||||
<div class="flex items-center gap-3 flex-wrap">
|
||||
<h1 class="text-2xl md:text-3xl font-semibold">Historial</h1>
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-semibold"
|
||||
style="background: color-mix(in oklab, var(--color-ink) 12%, transparent); color: var(--color-ink); font-variant-numeric: tabular-nums;"
|
||||
aria-label={`${filas.length} registros`}
|
||||
>
|
||||
{filas.length}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav aria-label="Vistas de solicitudes" class="mb-6 border-b flex gap-1 overflow-x-auto" style="border-color: color-mix(in oklab, var(--color-ink) 12%, transparent);">
|
||||
{tabs.map((t) => {
|
||||
const active = path === t.href;
|
||||
return (
|
||||
<a
|
||||
href={t.href}
|
||||
class:list={['px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 transition-colors -mb-px', active ? 'text-[color:var(--color-primary)]' : 'opacity-70 hover:opacity-100 border-transparent']}
|
||||
style={active ? 'border-color: var(--color-primary);' : ''}
|
||||
aria-current={active ? 'page' : undefined}
|
||||
>
|
||||
{t.label}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<form method="get" class="mb-4 flex items-end gap-3 flex-wrap">
|
||||
<div class="flex-1 min-w-[200px] max-w-xs">
|
||||
<label class="label" for="estado">Filtrar por estado</label>
|
||||
<select
|
||||
id="estado"
|
||||
name="estado"
|
||||
class="input"
|
||||
onchange="this.form.submit()"
|
||||
>
|
||||
<option value="">Todos</option>
|
||||
<option value="devuelto" selected={estadoFiltro === 'devuelto'}>Devuelto</option>
|
||||
<option value="rechazado" selected={estadoFiltro === 'rechazado'}>Rechazado</option>
|
||||
<option value="vencido" selected={estadoFiltro === 'vencido'}>Vencido</option>
|
||||
</select>
|
||||
</div>
|
||||
<noscript>
|
||||
<button type="submit" class="btn btn-primary">Aplicar</button>
|
||||
</noscript>
|
||||
</form>
|
||||
|
||||
{error && (
|
||||
<div role="alert" class="mb-4 rounded-lg p-3 text-sm" style="background: color-mix(in oklab, var(--color-danger) 12%, transparent); color: var(--color-danger);">
|
||||
Error cargando historial: {error.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{filas.length === 0 ? (
|
||||
<div class="card text-center py-12">
|
||||
<p class="font-medium">No hay registros para este filtro.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div class="card p-0 overflow-hidden hidden md:block">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="text-left" style="background: color-mix(in oklab, var(--color-ink) 4%, transparent);">
|
||||
<tr>
|
||||
<th class="p-3 font-medium">Alumno</th>
|
||||
<th class="p-3 font-medium">Material</th>
|
||||
<th class="p-3 font-medium">Cant.</th>
|
||||
<th class="p-3 font-medium">Estado</th>
|
||||
<th class="p-3 font-medium">Solicitado</th>
|
||||
<th class="p-3 font-medium">Devuelto</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filas.map((r: any) => (
|
||||
<tr class="border-t align-top" style="border-color: color-mix(in oklab, var(--color-ink) 10%, transparent);">
|
||||
<td class="p-3">
|
||||
<div class="font-medium">{r.alumno?.nombre ?? '—'}</div>
|
||||
<div class="text-xs opacity-70">{r.alumno?.matricula ?? ''} {r.alumno?.email ? `· ${r.alumno.email}` : ''}</div>
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<div>{r.material?.nombre ?? '—'}</div>
|
||||
<div class="text-xs opacity-70">Inv. {r.material?.numero_inventario ?? '—'}</div>
|
||||
</td>
|
||||
<td class="p-3" style="font-variant-numeric: tabular-nums;">{r.cantidad}</td>
|
||||
<td class="p-3">{estadoLabel[r.estado] ?? r.estado}</td>
|
||||
<td class="p-3 opacity-80">{fmtFecha.format(new Date(r.fecha_solicitud))}</td>
|
||||
<td class="p-3 opacity-80">{r.fecha_devolucion_real ? fmtFecha.format(new Date(r.fecha_devolucion_real)) : '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<ul class="md:hidden flex flex-col gap-3">
|
||||
{filas.map((r: any) => (
|
||||
<li class="card">
|
||||
<div class="flex items-baseline justify-between gap-2">
|
||||
<div class="font-medium">{r.alumno?.nombre ?? '—'}</div>
|
||||
<span class="text-xs rounded-full px-2 py-0.5" style="background: color-mix(in oklab, var(--color-ink) 10%, transparent);">{estadoLabel[r.estado] ?? r.estado}</span>
|
||||
</div>
|
||||
<div class="text-xs opacity-70">{r.alumno?.matricula ?? ''} {r.alumno?.email ? `· ${r.alumno.email}` : ''}</div>
|
||||
<div class="text-sm mt-2">{r.material?.nombre ?? '—'} · Cantidad <strong style="font-variant-numeric: tabular-nums;">{r.cantidad}</strong></div>
|
||||
<div class="text-xs opacity-70 mt-2">Solicitado {fmtFecha.format(new Date(r.fecha_solicitud))}</div>
|
||||
{r.fecha_devolucion_real && <div class="text-xs opacity-70">Devuelto {fmtFecha.format(new Date(r.fecha_devolucion_real))}</div>}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
@@ -0,0 +1,126 @@
|
||||
---
|
||||
import AppLayout from '@/layouts/AppLayout.astro';
|
||||
import AccionesSolicitud from '@/components/admin/solicitudes/AccionesSolicitud.tsx';
|
||||
|
||||
const supabase = Astro.locals.supabase;
|
||||
const { data, error } = await supabase
|
||||
.from('prestamos')
|
||||
.select(
|
||||
'id, cantidad, fecha_solicitud, notas, alumno:profiles!alumno_id(id, nombre, email, matricula), material:materiales!material_id(id, nombre, numero_inventario, cantidad_disponible)'
|
||||
)
|
||||
.eq('estado', 'pendiente')
|
||||
.order('fecha_solicitud', { ascending: true });
|
||||
|
||||
const filas = data ?? [];
|
||||
const fmtFecha = new Intl.DateTimeFormat('es-MX', { dateStyle: 'medium', timeStyle: 'short' });
|
||||
const path = Astro.url.pathname;
|
||||
const tabs = [
|
||||
{ href: '/admin/solicitudes', label: 'Pendientes' },
|
||||
{ href: '/admin/solicitudes/activos', label: 'En préstamo' },
|
||||
{ href: '/admin/solicitudes/historial', label: 'Historial' },
|
||||
];
|
||||
---
|
||||
<AppLayout title="Solicitudes pendientes — LabPréstamos">
|
||||
<div class="max-w-6xl">
|
||||
<header class="mb-4">
|
||||
<div class="flex items-center gap-3 flex-wrap">
|
||||
<h1 class="text-2xl md:text-3xl font-semibold">Solicitudes pendientes</h1>
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-semibold"
|
||||
style="background: color-mix(in oklab, var(--color-primary) 12%, transparent); color: var(--color-primary); font-variant-numeric: tabular-nums;"
|
||||
aria-label={`${filas.length} pendientes`}
|
||||
>
|
||||
{filas.length}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav aria-label="Vistas de solicitudes" class="mb-6 border-b flex gap-1 overflow-x-auto" style="border-color: color-mix(in oklab, var(--color-ink) 12%, transparent);">
|
||||
{tabs.map((t) => {
|
||||
const active = path === t.href || (t.href === '/admin/solicitudes' && path === '/admin/solicitudes/');
|
||||
return (
|
||||
<a
|
||||
href={t.href}
|
||||
class:list={['px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 transition-colors -mb-px', active ? 'text-[color:var(--color-primary)]' : 'opacity-70 hover:opacity-100 border-transparent']}
|
||||
style={active ? 'border-color: var(--color-primary);' : ''}
|
||||
aria-current={active ? 'page' : undefined}
|
||||
>
|
||||
{t.label}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{error && (
|
||||
<div role="alert" class="mb-4 rounded-lg p-3 text-sm" style="background: color-mix(in oklab, var(--color-danger) 12%, transparent); color: var(--color-danger);">
|
||||
Error cargando solicitudes: {error.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{filas.length === 0 ? (
|
||||
<div class="card text-center py-12">
|
||||
<div class="text-4xl mb-3" aria-hidden="true">✓</div>
|
||||
<p class="font-medium">No hay solicitudes por revisar.</p>
|
||||
<p class="text-sm opacity-70 mt-1">Todo al día.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Desktop: tabla */}
|
||||
<div class="card p-0 overflow-hidden hidden md:block">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="text-left" style="background: color-mix(in oklab, var(--color-ink) 4%, transparent);">
|
||||
<tr>
|
||||
<th class="p-3 font-medium">Alumno</th>
|
||||
<th class="p-3 font-medium">Material</th>
|
||||
<th class="p-3 font-medium">Cantidad</th>
|
||||
<th class="p-3 font-medium">Solicitado</th>
|
||||
<th class="p-3 font-medium text-right">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filas.map((r: any) => (
|
||||
<tr class="border-t align-top" style="border-color: color-mix(in oklab, var(--color-ink) 10%, transparent);">
|
||||
<td class="p-3">
|
||||
<div class="font-medium">{r.alumno?.nombre ?? '—'}</div>
|
||||
<div class="text-xs opacity-70">{r.alumno?.matricula ?? ''} {r.alumno?.email ? `· ${r.alumno.email}` : ''}</div>
|
||||
</td>
|
||||
<td class="p-3">
|
||||
<div>{r.material?.nombre ?? '—'}</div>
|
||||
<div class="text-xs opacity-70">
|
||||
Inv. {r.material?.numero_inventario ?? '—'} · disp. <span style="font-variant-numeric: tabular-nums;">{r.material?.cantidad_disponible ?? 0}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-3" style="font-variant-numeric: tabular-nums;">{r.cantidad}</td>
|
||||
<td class="p-3 opacity-80">{fmtFecha.format(new Date(r.fecha_solicitud))}</td>
|
||||
<td class="p-3">
|
||||
<div class="flex justify-end">
|
||||
<AccionesSolicitud client:load prestamo={r} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Mobile: tarjetas */}
|
||||
<ul class="md:hidden flex flex-col gap-3">
|
||||
{filas.map((r: any) => (
|
||||
<li class="card">
|
||||
<div class="flex items-baseline justify-between gap-2">
|
||||
<div class="font-medium">{r.alumno?.nombre ?? '—'}</div>
|
||||
<div class="text-xs opacity-70">{fmtFecha.format(new Date(r.fecha_solicitud))}</div>
|
||||
</div>
|
||||
<div class="text-xs opacity-70 mb-2">{r.alumno?.matricula ?? ''} {r.alumno?.email ? `· ${r.alumno.email}` : ''}</div>
|
||||
<div class="text-sm">{r.material?.nombre ?? '—'} <span class="opacity-70">· Inv. {r.material?.numero_inventario ?? '—'}</span></div>
|
||||
<div class="text-sm mt-1">Cantidad: <strong style="font-variant-numeric: tabular-nums;">{r.cantidad}</strong> <span class="opacity-70">· disp. {r.material?.cantidad_disponible ?? 0}</span></div>
|
||||
<div class="mt-3">
|
||||
<AccionesSolicitud client:load prestamo={r} />
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
Reference in New Issue
Block a user