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>
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
import AppLayout from '@/layouts/AppLayout.astro';
|
||||
import SolicitarModal from '@/components/alumno/SolicitarModal.tsx';
|
||||
import FiltroCategorias from '@/components/alumno/FiltroCategorias.tsx';
|
||||
|
||||
type Material = {
|
||||
id: number;
|
||||
nombre: string;
|
||||
descripcion: string | null;
|
||||
cantidad_disponible: number;
|
||||
cantidad_total: number;
|
||||
numero_inventario: string | null;
|
||||
categoria: { id: number; nombre: string } | null;
|
||||
};
|
||||
|
||||
const { data, error } = await Astro.locals.supabase
|
||||
.from('materiales')
|
||||
.select('id, nombre, descripcion, cantidad_disponible, cantidad_total, numero_inventario, categoria:categorias(id, nombre)')
|
||||
.eq('estado', 'disponible')
|
||||
.order('nombre');
|
||||
|
||||
const materiales = (data ?? []) as unknown as Material[];
|
||||
|
||||
const grupos = new Map<string, { id: number | null; nombre: string; items: Material[] }>();
|
||||
for (const m of materiales) {
|
||||
const key = m.categoria ? String(m.categoria.id) : 'sin';
|
||||
const nombre = m.categoria?.nombre ?? 'Sin categoría';
|
||||
if (!grupos.has(key)) grupos.set(key, { id: m.categoria?.id ?? null, nombre, items: [] });
|
||||
grupos.get(key)!.items.push(m);
|
||||
}
|
||||
const grupoList = Array.from(grupos.values()).sort((a, b) => a.nombre.localeCompare(b.nombre, 'es'));
|
||||
const categoriasFiltro = grupoList
|
||||
.filter((g) => g.id !== null)
|
||||
.map((g) => ({ id: g.id as number, nombre: g.nombre }));
|
||||
---
|
||||
<AppLayout title="Catálogo — LabPréstamos">
|
||||
<div class="max-w-6xl">
|
||||
<header class="mb-6">
|
||||
<h1 class="text-2xl md:text-3xl font-semibold">Catálogo</h1>
|
||||
<p class="text-sm opacity-70 mt-1">Material disponible en el Laboratorio de Sistemas.</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);">
|
||||
No se pudo cargar el catálogo. Recarga la página o intenta más tarde.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{materiales.length === 0 && !error && (
|
||||
<div class="card text-center">
|
||||
<h2 class="text-lg font-semibold mb-1">Aún no hay material publicado</h2>
|
||||
<p class="text-sm opacity-70">Vuelve pronto o contacta al encargado del laboratorio.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{materiales.length > 0 && (
|
||||
<>
|
||||
{categoriasFiltro.length > 0 && (
|
||||
<div class="mb-6">
|
||||
<FiltroCategorias categorias={categoriasFiltro} client:idle />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p id="catalogo-empty-filter" hidden class="text-sm opacity-70 mb-4">
|
||||
Ningún material en esta categoría. Prueba con otra.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{materiales.map((m) => (
|
||||
<article
|
||||
class="card flex flex-col gap-3"
|
||||
data-cat={m.categoria?.id ?? 'sin'}
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<h3 class="font-semibold leading-snug">{m.nombre}</h3>
|
||||
{m.categoria && (
|
||||
<span class="text-xs px-2 py-0.5 rounded-full whitespace-nowrap" style="background: color-mix(in oklab, var(--color-primary) 10%, transparent); color: var(--color-primary);">
|
||||
{m.categoria.nombre}
|
||||
</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">Disponibles</dt>
|
||||
<dd class="text-right" style="font-variant-numeric: tabular-nums;">
|
||||
{m.cantidad_disponible} / {m.cantidad_total}
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<div class="mt-auto">
|
||||
<SolicitarModal
|
||||
material={{ id: m.id, nombre: m.nombre, cantidad_disponible: m.cantidad_disponible }}
|
||||
client:load
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</AppLayout>
|
||||
@@ -0,0 +1,182 @@
|
||||
---
|
||||
import AppLayout from '@/layouts/AppLayout.astro';
|
||||
|
||||
type Estado = 'pendiente' | 'aprobado' | 'rechazado' | 'activo' | 'devuelto' | 'vencido';
|
||||
|
||||
type Prestamo = {
|
||||
id: number;
|
||||
cantidad: number;
|
||||
estado: Estado;
|
||||
fecha_solicitud: string;
|
||||
fecha_aprobacion: string | null;
|
||||
fecha_devolucion_estimada: string | null;
|
||||
fecha_devolucion_real: string | null;
|
||||
notas: string | null;
|
||||
material: { id: number; nombre: string; numero_inventario: string | null } | null;
|
||||
};
|
||||
|
||||
const user = Astro.locals.user!;
|
||||
|
||||
const { data, error } = await Astro.locals.supabase
|
||||
.from('prestamos')
|
||||
.select('id, cantidad, estado, fecha_solicitud, fecha_aprobacion, fecha_devolucion_estimada, fecha_devolucion_real, notas, material:materiales(id, nombre, numero_inventario)')
|
||||
.eq('alumno_id', user.id)
|
||||
.order('fecha_solicitud', { ascending: false });
|
||||
|
||||
const prestamos = (data ?? []) as unknown as Prestamo[];
|
||||
|
||||
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-primary)',
|
||||
activo: 'var(--color-primary)',
|
||||
devuelto: 'var(--color-ink)',
|
||||
rechazado: 'var(--color-danger)',
|
||||
vencido: 'var(--color-danger)',
|
||||
};
|
||||
|
||||
const badgeStyle = (e: Estado) =>
|
||||
`background: color-mix(in oklab, ${estadoColor[e]} 15%, transparent); color: ${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);">
|
||||
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">
|
||||
<div class="min-w-0">
|
||||
<h3 class="font-semibold leading-snug truncate">{p.material?.nombre ?? 'Material eliminado'}</h3>
|
||||
<p class="text-xs opacity-60 font-mono mt-0.5">
|
||||
{p.material?.numero_inventario ?? '—'}
|
||||
</p>
|
||||
</div>
|
||||
<span class="text-xs font-medium px-2 py-1 rounded-full 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">Cantidad</dt>
|
||||
<dd class="text-right" style="font-variant-numeric: tabular-nums;">{p.cantidad}</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">
|
||||
<span aria-hidden="true">›</span>
|
||||
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">
|
||||
<div class="min-w-0">
|
||||
<h3 class="font-semibold leading-snug truncate">{p.material?.nombre ?? 'Material eliminado'}</h3>
|
||||
<p class="text-xs opacity-60 font-mono mt-0.5">
|
||||
{p.material?.numero_inventario ?? '—'}
|
||||
</p>
|
||||
</div>
|
||||
<span class="text-xs font-medium px-2 py-1 rounded-full 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">Cantidad</dt>
|
||||
<dd class="text-right" style="font-variant-numeric: tabular-nums;">{p.cantidad}</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 > span[aria-hidden] { transform: rotate(90deg); }
|
||||
details > summary > span[aria-hidden] {
|
||||
display: inline-block;
|
||||
transition: transform 150ms ease-out;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
const parseId = (raw: string | undefined) => {
|
||||
const id = Number(raw);
|
||||
return Number.isInteger(id) && id > 0 ? id : null;
|
||||
};
|
||||
|
||||
export const PATCH: APIRoute = async ({ request, locals, params }) => {
|
||||
if (locals.profile?.rol !== 'admin') {
|
||||
return Response.json({ error: 'No autorizado' }, { status: 403 });
|
||||
}
|
||||
|
||||
const id = parseId(params.id);
|
||||
if (!id) return Response.json({ error: 'ID inválido' }, { status: 400 });
|
||||
|
||||
let body: { nombre?: unknown };
|
||||
try {
|
||||
body = await request.json();
|
||||
} catch {
|
||||
return Response.json({ error: 'JSON inválido' }, { status: 400 });
|
||||
}
|
||||
|
||||
const nombre = typeof body.nombre === 'string' ? body.nombre.trim() : '';
|
||||
if (!nombre) {
|
||||
return Response.json({ error: 'El nombre es obligatorio' }, { status: 400 });
|
||||
}
|
||||
|
||||
const { error } = await locals.supabase
|
||||
.from('categorias')
|
||||
.update({ nombre })
|
||||
.eq('id', id);
|
||||
|
||||
if (error) {
|
||||
if ((error as { code?: string }).code === '23505') {
|
||||
return Response.json({ error: 'Ya existe una categoría con ese nombre' }, { status: 409 });
|
||||
}
|
||||
return Response.json({ error: 'No se pudo actualizar' }, { status: 500 });
|
||||
}
|
||||
|
||||
return Response.json({ ok: true });
|
||||
};
|
||||
|
||||
export const DELETE: APIRoute = async ({ locals, params }) => {
|
||||
if (locals.profile?.rol !== 'admin') {
|
||||
return Response.json({ error: 'No autorizado' }, { status: 403 });
|
||||
}
|
||||
|
||||
const id = parseId(params.id);
|
||||
if (!id) return Response.json({ error: 'ID inválido' }, { status: 400 });
|
||||
|
||||
const { count } = await locals.supabase
|
||||
.from('materiales')
|
||||
.select('id', { count: 'exact', head: true })
|
||||
.eq('categoria_id', id);
|
||||
|
||||
const { error } = await locals.supabase.from('categorias').delete().eq('id', id);
|
||||
|
||||
if (error) {
|
||||
if ((error as { code?: string }).code === '23503') {
|
||||
return Response.json(
|
||||
{ error: `Tiene ${count ?? 'varios'} materiales asociados — reasígnalos primero` },
|
||||
{ status: 409 },
|
||||
);
|
||||
}
|
||||
return Response.json({ error: 'No se pudo eliminar' }, { status: 500 });
|
||||
}
|
||||
|
||||
return Response.json({ ok: true });
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
export const POST: APIRoute = async ({ request, locals }) => {
|
||||
if (locals.profile?.rol !== 'admin') {
|
||||
return Response.json({ error: 'No autorizado' }, { status: 403 });
|
||||
}
|
||||
|
||||
let body: { nombre?: unknown };
|
||||
try {
|
||||
body = await request.json();
|
||||
} catch {
|
||||
return Response.json({ error: 'JSON inválido' }, { status: 400 });
|
||||
}
|
||||
|
||||
const nombre = typeof body.nombre === 'string' ? body.nombre.trim() : '';
|
||||
if (!nombre) {
|
||||
return Response.json({ error: 'El nombre es obligatorio' }, { status: 400 });
|
||||
}
|
||||
|
||||
const { data, error } = await locals.supabase
|
||||
.from('categorias')
|
||||
.insert({ nombre })
|
||||
.select('id')
|
||||
.single();
|
||||
|
||||
if (error) {
|
||||
if ((error as { code?: string }).code === '23505') {
|
||||
return Response.json({ error: 'Ya existe una categoría con ese nombre' }, { status: 409 });
|
||||
}
|
||||
return Response.json({ error: 'No se pudo crear la categoría' }, { status: 500 });
|
||||
}
|
||||
|
||||
return Response.json({ id: data.id }, { status: 201 });
|
||||
};
|
||||
@@ -0,0 +1,140 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
type Patch = {
|
||||
nombre?: string | null;
|
||||
categoria_id?: number | null;
|
||||
descripcion?: string | null;
|
||||
numero_inventario?: string | null;
|
||||
estado?: string;
|
||||
cantidad_total?: number;
|
||||
cantidad_disponible?: number;
|
||||
};
|
||||
|
||||
const parseId = (raw: string | undefined) => {
|
||||
const id = Number(raw);
|
||||
return Number.isInteger(id) && id > 0 ? id : null;
|
||||
};
|
||||
|
||||
export const PATCH: APIRoute = async ({ request, locals, params }) => {
|
||||
if (locals.profile?.rol !== 'admin') {
|
||||
return Response.json({ error: 'No autorizado' }, { status: 403 });
|
||||
}
|
||||
|
||||
const id = parseId(params.id);
|
||||
if (!id) return Response.json({ error: 'ID inválido' }, { status: 400 });
|
||||
|
||||
let body: Record<string, unknown>;
|
||||
try {
|
||||
body = await request.json();
|
||||
} catch {
|
||||
return Response.json({ error: 'JSON inválido' }, { status: 400 });
|
||||
}
|
||||
|
||||
const patch: Patch = {};
|
||||
|
||||
if ('nombre' in body) {
|
||||
const nombre = typeof body.nombre === 'string' ? body.nombre.trim() : '';
|
||||
if (!nombre) return Response.json({ error: 'El nombre no puede quedar vacío' }, { status: 400 });
|
||||
patch.nombre = nombre;
|
||||
}
|
||||
|
||||
if ('categoria_id' in body) {
|
||||
if (body.categoria_id === null || body.categoria_id === '') {
|
||||
patch.categoria_id = null;
|
||||
} else {
|
||||
const cid = Number(body.categoria_id);
|
||||
if (!Number.isInteger(cid) || cid <= 0)
|
||||
return Response.json({ error: 'Categoría inválida' }, { status: 400 });
|
||||
patch.categoria_id = cid;
|
||||
}
|
||||
}
|
||||
|
||||
if ('descripcion' in body) {
|
||||
patch.descripcion =
|
||||
typeof body.descripcion === 'string' && body.descripcion.trim()
|
||||
? body.descripcion.trim()
|
||||
: null;
|
||||
}
|
||||
|
||||
if ('numero_inventario' in body) {
|
||||
patch.numero_inventario =
|
||||
typeof body.numero_inventario === 'string' && body.numero_inventario.trim()
|
||||
? body.numero_inventario.trim()
|
||||
: null;
|
||||
}
|
||||
|
||||
if ('estado' in body) {
|
||||
const estado = typeof body.estado === 'string' ? body.estado : '';
|
||||
if (!['disponible', 'mantenimiento', 'baja'].includes(estado))
|
||||
return Response.json({ error: 'Estado inválido' }, { status: 400 });
|
||||
patch.estado = estado;
|
||||
}
|
||||
|
||||
if ('cantidad_total' in body) {
|
||||
const nuevoTotal = Number(body.cantidad_total);
|
||||
if (!Number.isInteger(nuevoTotal) || nuevoTotal < 0)
|
||||
return Response.json({ error: 'Cantidad total inválida' }, { status: 400 });
|
||||
|
||||
const { data: actual, error: selErr } = await locals.supabase
|
||||
.from('materiales')
|
||||
.select('cantidad_total, cantidad_disponible')
|
||||
.eq('id', id)
|
||||
.maybeSingle();
|
||||
|
||||
if (selErr || !actual)
|
||||
return Response.json({ error: 'Material no encontrado' }, { status: 404 });
|
||||
|
||||
const prestados = actual.cantidad_total - actual.cantidad_disponible;
|
||||
if (nuevoTotal < prestados) {
|
||||
return Response.json(
|
||||
{ error: `No puede quedar debajo de lo prestado (${prestados})` },
|
||||
{ status: 409 },
|
||||
);
|
||||
}
|
||||
patch.cantidad_total = nuevoTotal;
|
||||
patch.cantidad_disponible = actual.cantidad_disponible + (nuevoTotal - actual.cantidad_total);
|
||||
}
|
||||
|
||||
if (Object.keys(patch).length === 0) {
|
||||
return Response.json({ error: 'Nada que actualizar' }, { status: 400 });
|
||||
}
|
||||
|
||||
const { error } = await locals.supabase.from('materiales').update(patch).eq('id', id);
|
||||
|
||||
if (error) {
|
||||
if ((error as { code?: string }).code === '23505') {
|
||||
return Response.json({ error: 'Nº de inventario ya existe' }, { status: 409 });
|
||||
}
|
||||
if ((error as { code?: string }).code === '23503') {
|
||||
return Response.json({ error: 'Categoría inexistente' }, { status: 409 });
|
||||
}
|
||||
return Response.json({ error: 'No se pudo actualizar' }, { status: 500 });
|
||||
}
|
||||
|
||||
return Response.json({ ok: true });
|
||||
};
|
||||
|
||||
export const DELETE: APIRoute = async ({ locals, params }) => {
|
||||
if (locals.profile?.rol !== 'admin') {
|
||||
return Response.json({ error: 'No autorizado' }, { status: 403 });
|
||||
}
|
||||
|
||||
const id = parseId(params.id);
|
||||
if (!id) return Response.json({ error: 'ID inválido' }, { status: 400 });
|
||||
|
||||
const { error } = await locals.supabase.from('materiales').delete().eq('id', id);
|
||||
|
||||
if (error) {
|
||||
if ((error as { code?: string }).code === '23503') {
|
||||
return Response.json(
|
||||
{ error: 'Tiene préstamos asociados — no se puede eliminar' },
|
||||
{ status: 409 },
|
||||
);
|
||||
}
|
||||
return Response.json({ error: 'No se pudo eliminar' }, { status: 500 });
|
||||
}
|
||||
|
||||
return Response.json({ ok: true });
|
||||
};
|
||||
@@ -0,0 +1,79 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
export const POST: APIRoute = async ({ request, locals }) => {
|
||||
if (locals.profile?.rol !== 'admin') {
|
||||
return Response.json({ error: 'No autorizado' }, { status: 403 });
|
||||
}
|
||||
|
||||
let body: {
|
||||
nombre?: unknown;
|
||||
categoria_id?: unknown;
|
||||
descripcion?: unknown;
|
||||
cantidad_total?: unknown;
|
||||
numero_inventario?: unknown;
|
||||
estado?: unknown;
|
||||
};
|
||||
try {
|
||||
body = await request.json();
|
||||
} catch {
|
||||
return Response.json({ error: 'JSON inválido' }, { status: 400 });
|
||||
}
|
||||
|
||||
const nombre = typeof body.nombre === 'string' ? body.nombre.trim() : '';
|
||||
if (!nombre) {
|
||||
return Response.json({ error: 'El nombre es obligatorio' }, { status: 400 });
|
||||
}
|
||||
|
||||
const cantidad_total = Number(body.cantidad_total);
|
||||
if (!Number.isInteger(cantidad_total) || cantidad_total < 0) {
|
||||
return Response.json({ error: 'La cantidad total debe ser un entero mayor o igual a 0' }, { status: 400 });
|
||||
}
|
||||
|
||||
const categoria_id =
|
||||
body.categoria_id === null || body.categoria_id === undefined || body.categoria_id === ''
|
||||
? null
|
||||
: Number(body.categoria_id);
|
||||
if (categoria_id !== null && (!Number.isInteger(categoria_id) || categoria_id <= 0)) {
|
||||
return Response.json({ error: 'Categoría inválida' }, { status: 400 });
|
||||
}
|
||||
|
||||
const descripcion =
|
||||
typeof body.descripcion === 'string' && body.descripcion.trim() ? body.descripcion.trim() : null;
|
||||
const numero_inventario =
|
||||
typeof body.numero_inventario === 'string' && body.numero_inventario.trim()
|
||||
? body.numero_inventario.trim()
|
||||
: null;
|
||||
|
||||
const estadoIn = typeof body.estado === 'string' ? body.estado : 'disponible';
|
||||
if (!['disponible', 'mantenimiento', 'baja'].includes(estadoIn)) {
|
||||
return Response.json({ error: 'Estado inválido' }, { status: 400 });
|
||||
}
|
||||
|
||||
const { data, error } = await locals.supabase
|
||||
.from('materiales')
|
||||
.insert({
|
||||
nombre,
|
||||
categoria_id,
|
||||
descripcion,
|
||||
cantidad_total,
|
||||
cantidad_disponible: cantidad_total,
|
||||
numero_inventario,
|
||||
estado: estadoIn,
|
||||
})
|
||||
.select('id')
|
||||
.single();
|
||||
|
||||
if (error) {
|
||||
if ((error as { code?: string }).code === '23505') {
|
||||
return Response.json({ error: 'Nº de inventario ya existe' }, { status: 409 });
|
||||
}
|
||||
if ((error as { code?: string }).code === '23503') {
|
||||
return Response.json({ error: 'Categoría inexistente' }, { status: 409 });
|
||||
}
|
||||
return Response.json({ error: 'No se pudo crear el material' }, { status: 500 });
|
||||
}
|
||||
|
||||
return Response.json({ id: data.id }, { status: 201 });
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
const json = (body: unknown, status = 200) =>
|
||||
new Response(JSON.stringify(body), { status, headers: { 'content-type': 'application/json' } });
|
||||
|
||||
const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
|
||||
|
||||
export const POST: APIRoute = async ({ params, request, locals }) => {
|
||||
if (!locals.user) return json({ error: 'no autenticado' }, 401);
|
||||
if (locals.profile?.rol !== 'admin') return json({ error: 'no autorizado' }, 403);
|
||||
|
||||
const id = Number(params.id);
|
||||
if (!Number.isInteger(id) || id <= 0) return json({ error: 'id inválido' }, 400);
|
||||
|
||||
let body: any;
|
||||
try { body = await request.json(); } catch { return json({ error: 'JSON inválido' }, 400); }
|
||||
|
||||
const fecha = String(body?.fecha_devolucion_estimada ?? '');
|
||||
if (!ISO_DATE.test(fecha)) return json({ error: 'fecha_devolucion_estimada debe ser YYYY-MM-DD' }, 400);
|
||||
const hoy = new Date().toISOString().split('T')[0];
|
||||
if (fecha < hoy) return json({ error: 'la fecha no puede ser pasada' }, 400);
|
||||
|
||||
const notas = typeof body?.notas === 'string' && body.notas.trim() ? body.notas.trim() : null;
|
||||
|
||||
const update: Record<string, unknown> = {
|
||||
estado: 'aprobado',
|
||||
fecha_aprobacion: new Date().toISOString(),
|
||||
fecha_devolucion_estimada: fecha,
|
||||
aprobado_por: locals.user.id,
|
||||
};
|
||||
if (notas) update.notas = notas;
|
||||
|
||||
const { data, error } = await locals.supabase
|
||||
.from('prestamos')
|
||||
.update(update)
|
||||
.eq('id', id)
|
||||
.eq('estado', 'pendiente')
|
||||
.select('id')
|
||||
.maybeSingle();
|
||||
|
||||
if (error) return json({ error: error.message }, 500);
|
||||
if (!data) return json({ error: 'la solicitud ya no está pendiente' }, 409);
|
||||
return json({ ok: true });
|
||||
};
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
const json = (body: unknown, status = 200) =>
|
||||
new Response(JSON.stringify(body), { status, headers: { 'content-type': 'application/json' } });
|
||||
|
||||
export const GET: APIRoute = async ({ params, locals }) => {
|
||||
if (!locals.user) return json({ error: 'no autenticado' }, 401);
|
||||
if (locals.profile?.rol !== 'admin') return json({ error: 'no autorizado' }, 403);
|
||||
|
||||
const id = Number(params.id);
|
||||
if (!Number.isInteger(id) || id <= 0) return json({ error: 'id inválido' }, 400);
|
||||
|
||||
const prestamoQ = locals.supabase
|
||||
.from('prestamos')
|
||||
.select(
|
||||
'id, cantidad, estado, fecha_solicitud, fecha_aprobacion, fecha_devolucion_estimada, fecha_devolucion_real, notas, alumno:profiles!alumno_id(id, nombre, email, matricula), material:materiales!material_id(id, nombre, numero_inventario)'
|
||||
)
|
||||
.eq('id', id)
|
||||
.maybeSingle();
|
||||
|
||||
// Nombre y orden asumidos del audit_log: select('*') para no romper si el esquema difiere.
|
||||
const logQ = locals.supabase
|
||||
.from('audit_log')
|
||||
.select('*')
|
||||
.eq('prestamo_id', id)
|
||||
.order('created_at', { ascending: false })
|
||||
.limit(20);
|
||||
|
||||
const [{ data: prestamo, error: pErr }, { data: audit_log, error: lErr }] = await Promise.all([prestamoQ, logQ]);
|
||||
|
||||
if (pErr) return json({ error: pErr.message }, 500);
|
||||
if (!prestamo) return json({ error: 'no encontrado' }, 404);
|
||||
|
||||
return json({ prestamo, audit_log: lErr ? [] : (audit_log ?? []) });
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
const json = (body: unknown, status = 200) =>
|
||||
new Response(JSON.stringify(body), { status, headers: { 'content-type': 'application/json' } });
|
||||
|
||||
export const POST: APIRoute = async ({ params, locals }) => {
|
||||
if (!locals.user) return json({ error: 'no autenticado' }, 401);
|
||||
if (locals.profile?.rol !== 'admin') return json({ error: 'no autorizado' }, 403);
|
||||
|
||||
const id = Number(params.id);
|
||||
if (!Number.isInteger(id) || id <= 0) return json({ error: 'id inválido' }, 400);
|
||||
|
||||
const { data, error } = await locals.supabase
|
||||
.from('prestamos')
|
||||
.update({ estado: 'devuelto', fecha_devolucion_real: new Date().toISOString() })
|
||||
.eq('id', id)
|
||||
.in('estado', ['aprobado', 'activo'])
|
||||
.select('id')
|
||||
.maybeSingle();
|
||||
|
||||
if (error) return json({ error: error.message }, 500);
|
||||
if (!data) return json({ error: 'el préstamo no está en curso' }, 409);
|
||||
return json({ ok: true });
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
const json = (body: unknown, status = 200) =>
|
||||
new Response(JSON.stringify(body), { status, headers: { 'content-type': 'application/json' } });
|
||||
|
||||
export const POST: APIRoute = async ({ params, request, locals }) => {
|
||||
if (!locals.user) return json({ error: 'no autenticado' }, 401);
|
||||
if (locals.profile?.rol !== 'admin') return json({ error: 'no autorizado' }, 403);
|
||||
|
||||
const id = Number(params.id);
|
||||
if (!Number.isInteger(id) || id <= 0) return json({ error: 'id inválido' }, 400);
|
||||
|
||||
let body: any;
|
||||
try { body = await request.json(); } catch { return json({ error: 'JSON inválido' }, 400); }
|
||||
|
||||
const motivo = typeof body?.motivo === 'string' ? body.motivo.trim() : '';
|
||||
if (motivo.length < 5) return json({ error: 'el motivo debe tener al menos 5 caracteres' }, 400);
|
||||
|
||||
const { data, error } = await locals.supabase
|
||||
.from('prestamos')
|
||||
.update({ estado: 'rechazado', notas: motivo, aprobado_por: locals.user.id })
|
||||
.eq('id', id)
|
||||
.eq('estado', 'pendiente')
|
||||
.select('id')
|
||||
.maybeSingle();
|
||||
|
||||
if (error) return json({ error: error.message }, 500);
|
||||
if (!data) return json({ error: 'la solicitud ya no está pendiente' }, 409);
|
||||
return json({ ok: true });
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
export const GET: APIRoute = async ({ locals, url }) => {
|
||||
if (locals.profile?.rol !== 'admin') {
|
||||
return new Response('Forbidden', { status: 403 });
|
||||
}
|
||||
const raw = (url.searchParams.get('q') ?? '').trim();
|
||||
// ponytail: strip wildcards + comma so .or() parses cleanly; swap for FTS index if search feels slow
|
||||
const q = raw.replace(/[%_,\\]/g, ' ').slice(0, 64);
|
||||
if (!q) {
|
||||
return Response.json([]);
|
||||
}
|
||||
const pattern = `%${q}%`;
|
||||
const { data, error } = await locals.supabase
|
||||
.from('profiles')
|
||||
.select('id, nombre, email, matricula')
|
||||
.or(`nombre.ilike.${pattern},email.ilike.${pattern},matricula.ilike.${pattern}`)
|
||||
.limit(10);
|
||||
if (error) return new Response(error.message, { status: 500 });
|
||||
const items = (data ?? []).map((p) => {
|
||||
const nombre = p.nombre ?? p.email;
|
||||
const mat = p.matricula ? ` (${p.matricula})` : '';
|
||||
return { id: p.id, label: `${nombre}${mat} — ${p.email}` };
|
||||
});
|
||||
return Response.json(items);
|
||||
};
|
||||
@@ -0,0 +1,90 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
const HEADERS = [
|
||||
'Fecha solicitud',
|
||||
'Alumno',
|
||||
'Matrícula',
|
||||
'Email',
|
||||
'Material',
|
||||
'Nº inventario',
|
||||
'Cantidad',
|
||||
'Estado',
|
||||
'Fecha aprobación',
|
||||
'Fecha devolución estimada',
|
||||
'Fecha devolución real',
|
||||
'Notas',
|
||||
];
|
||||
|
||||
function csvCell(v: unknown): string {
|
||||
const s = v == null ? '' : String(v);
|
||||
return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
|
||||
}
|
||||
|
||||
function isoDate(v: string | null | undefined): string {
|
||||
if (!v) return '';
|
||||
// Timestamps y dates ambos son ISO-parseables; toISOString().slice(0,10) devuelve YYYY-MM-DD
|
||||
const d = new Date(v);
|
||||
return isNaN(d.getTime()) ? '' : d.toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
export const GET: APIRoute = async ({ locals, url }) => {
|
||||
if (locals.profile?.rol !== 'admin') {
|
||||
return new Response('Forbidden', { status: 403 });
|
||||
}
|
||||
const sp = url.searchParams;
|
||||
const desde = sp.get('desde');
|
||||
const hasta = sp.get('hasta');
|
||||
const estado = sp.get('estado');
|
||||
const materialId = sp.get('material_id');
|
||||
const alumnoId = sp.get('alumno_id');
|
||||
|
||||
let query = locals.supabase
|
||||
.from('prestamos')
|
||||
.select(`
|
||||
id, cantidad, fecha_solicitud, fecha_aprobacion, fecha_devolucion_estimada, fecha_devolucion_real, estado, notas,
|
||||
alumno:profiles!alumno_id(nombre, email, matricula),
|
||||
material:materiales!material_id(nombre, numero_inventario)
|
||||
`)
|
||||
.order('fecha_solicitud', { ascending: false })
|
||||
// ponytail: 5000 evita OOM en export ad-hoc; paginar/streamear si un solo reporte lo excede rutinariamente
|
||||
.limit(5000);
|
||||
|
||||
if (desde) query = query.gte('fecha_solicitud', desde);
|
||||
if (hasta) query = query.lte('fecha_solicitud', `${hasta}T23:59:59.999Z`);
|
||||
if (estado && estado !== 'all') query = query.eq('estado', estado);
|
||||
if (materialId) query = query.eq('material_id', materialId);
|
||||
if (alumnoId) query = query.eq('alumno_id', alumnoId);
|
||||
|
||||
const { data, error } = await query;
|
||||
if (error) return new Response(error.message, { status: 500 });
|
||||
|
||||
const rows = (data ?? []).map((r: any) => [
|
||||
isoDate(r.fecha_solicitud),
|
||||
r.alumno?.nombre ?? '',
|
||||
r.alumno?.matricula ?? '',
|
||||
r.alumno?.email ?? '',
|
||||
r.material?.nombre ?? '',
|
||||
r.material?.numero_inventario ?? '',
|
||||
r.cantidad,
|
||||
r.estado,
|
||||
isoDate(r.fecha_aprobacion),
|
||||
isoDate(r.fecha_devolucion_estimada),
|
||||
isoDate(r.fecha_devolucion_real),
|
||||
r.notas ?? '',
|
||||
]);
|
||||
|
||||
const lines = [HEADERS, ...rows].map((row) => row.map(csvCell).join(','));
|
||||
// BOM para que Excel abra UTF-8 sin romper acentos
|
||||
const csv = '' + lines.join('\r\n') + '\r\n';
|
||||
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
return new Response(csv, {
|
||||
headers: {
|
||||
'Content-Type': 'text/csv; charset=utf-8',
|
||||
'Content-Disposition': `attachment; filename="reporte-${today}.csv"`,
|
||||
'Cache-Control': 'no-store',
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
export const GET: APIRoute = async ({ locals, url }) => {
|
||||
if (locals.profile?.rol !== 'admin') {
|
||||
return new Response('Forbidden', { status: 403 });
|
||||
}
|
||||
const raw = (url.searchParams.get('q') ?? '').trim();
|
||||
// ponytail: strip PostgREST wildcards + comma so ilike/or() stay literal; FTS when catálogo crece >2k
|
||||
const q = raw.replace(/[%_,\\]/g, ' ').slice(0, 64);
|
||||
if (!q) {
|
||||
return Response.json([]);
|
||||
}
|
||||
const { data, error } = await locals.supabase
|
||||
.from('materiales')
|
||||
.select('id, nombre, numero_inventario')
|
||||
.ilike('nombre', `%${q}%`)
|
||||
.order('nombre', { ascending: true })
|
||||
.limit(10);
|
||||
if (error) return new Response(error.message, { status: 500 });
|
||||
const items = (data ?? []).map((m) => ({
|
||||
id: m.id,
|
||||
label: m.numero_inventario ? `${m.nombre} — ${m.numero_inventario}` : m.nombre,
|
||||
}));
|
||||
return Response.json(items);
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
import { serverClient } from '@/lib/supabase';
|
||||
|
||||
export const GET: APIRoute = async ({ url, cookies, redirect }) => {
|
||||
const code = url.searchParams.get('code');
|
||||
const errorParam = url.searchParams.get('error');
|
||||
|
||||
if (errorParam || !code) {
|
||||
return redirect('/login?error=oauth');
|
||||
}
|
||||
|
||||
const supabase = serverClient(cookies);
|
||||
const { error } = await supabase.auth.exchangeCodeForSession(code);
|
||||
if (error) return redirect('/login?error=oauth');
|
||||
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
if (user && !user.email?.toLowerCase().endsWith('@uabc.edu.mx')) {
|
||||
await supabase.auth.signOut();
|
||||
return redirect('/login?error=dominio');
|
||||
}
|
||||
|
||||
return redirect('/');
|
||||
};
|
||||
@@ -0,0 +1,7 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
import { serverClient } from '@/lib/supabase';
|
||||
|
||||
export const POST: APIRoute = async ({ cookies, redirect }) => {
|
||||
await serverClient(cookies).auth.signOut();
|
||||
return redirect('/login');
|
||||
};
|
||||
@@ -0,0 +1,58 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
export const POST: APIRoute = async ({ request, locals }) => {
|
||||
const user = locals.user;
|
||||
if (!user) {
|
||||
return Response.json({ error: 'No autenticado' }, { status: 401 });
|
||||
}
|
||||
|
||||
let body: { material_id?: unknown; cantidad?: unknown; notas?: unknown };
|
||||
try {
|
||||
body = await request.json();
|
||||
} catch {
|
||||
return Response.json({ error: 'JSON inválido' }, { status: 400 });
|
||||
}
|
||||
|
||||
const material_id = Number(body.material_id);
|
||||
const cantidad = Number(body.cantidad);
|
||||
const notas = typeof body.notas === 'string' && body.notas.trim() ? body.notas.trim() : null;
|
||||
|
||||
if (!Number.isInteger(material_id) || material_id <= 0) {
|
||||
return Response.json({ error: 'material_id requerido' }, { status: 400 });
|
||||
}
|
||||
if (!Number.isInteger(cantidad) || cantidad <= 0) {
|
||||
return Response.json({ error: 'cantidad debe ser un entero mayor que cero' }, { status: 400 });
|
||||
}
|
||||
|
||||
const supabase = locals.supabase;
|
||||
|
||||
const { data: material, error: matErr } = await supabase
|
||||
.from('materiales')
|
||||
.select('id, cantidad_disponible, estado')
|
||||
.eq('id', material_id)
|
||||
.maybeSingle();
|
||||
|
||||
if (matErr) {
|
||||
return Response.json({ error: 'No se pudo verificar el material' }, { status: 500 });
|
||||
}
|
||||
if (!material || material.estado !== 'disponible') {
|
||||
return Response.json({ error: 'Material no disponible' }, { status: 404 });
|
||||
}
|
||||
if (material.cantidad_disponible < cantidad) {
|
||||
return Response.json({ error: 'Sin stock suficiente' }, { status: 409 });
|
||||
}
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('prestamos')
|
||||
.insert({ alumno_id: user.id, material_id, cantidad, notas })
|
||||
.select('id')
|
||||
.single();
|
||||
|
||||
if (error) {
|
||||
return Response.json({ error: 'No se pudo registrar la solicitud' }, { status: 500 });
|
||||
}
|
||||
|
||||
return Response.json({ id: data.id }, { status: 201 });
|
||||
};
|
||||
+41
-7
@@ -1,11 +1,45 @@
|
||||
---
|
||||
import Welcome from '../components/Welcome.astro';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import AppLayout from '@/layouts/AppLayout.astro';
|
||||
|
||||
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
|
||||
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
|
||||
const profile = Astro.locals.profile;
|
||||
const isAdmin = profile?.rol === 'admin';
|
||||
const nombre = profile?.nombre ?? profile?.email?.split('@')[0] ?? '';
|
||||
---
|
||||
<AppLayout title="Inicio — LabPréstamos">
|
||||
<div class="max-w-3xl">
|
||||
<header class="mb-8">
|
||||
<p class="text-sm opacity-60">Bienvenido{nombre ? ',' : ''}</p>
|
||||
<h1 class="text-2xl md:text-3xl font-semibold">{nombre || 'Laboratorio de Sistemas'}</h1>
|
||||
</header>
|
||||
|
||||
<Layout>
|
||||
<Welcome />
|
||||
</Layout>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
{isAdmin ? (
|
||||
<>
|
||||
<a href="/admin/solicitudes" class="card block hover:brightness-105 transition-[filter,transform] duration-150 motion-safe:hover:-translate-y-0.5">
|
||||
<h2 class="font-semibold text-lg mb-1">Solicitudes</h2>
|
||||
<p class="text-sm opacity-70">Aprobar o rechazar peticiones de material.</p>
|
||||
</a>
|
||||
<a href="/admin/inventario" class="card block hover:brightness-105 transition-[filter,transform] duration-150 motion-safe:hover:-translate-y-0.5">
|
||||
<h2 class="font-semibold text-lg mb-1">Inventario</h2>
|
||||
<p class="text-sm opacity-70">Materiales y categorías del laboratorio.</p>
|
||||
</a>
|
||||
<a href="/admin/reportes" class="card block hover:brightness-105 transition-[filter,transform] duration-150 motion-safe:hover:-translate-y-0.5 md:col-span-2">
|
||||
<h2 class="font-semibold text-lg mb-1">Reportes</h2>
|
||||
<p class="text-sm opacity-70">Historial y exportación de préstamos.</p>
|
||||
</a>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<a href="/alumno/catalogo" class="card block hover:brightness-105 transition-[filter,transform] duration-150 motion-safe:hover:-translate-y-0.5">
|
||||
<h2 class="font-semibold text-lg mb-1">Catálogo</h2>
|
||||
<p class="text-sm opacity-70">Ver material disponible y solicitar un préstamo.</p>
|
||||
</a>
|
||||
<a href="/alumno/mis-prestamos" class="card block hover:brightness-105 transition-[filter,transform] duration-150 motion-safe:hover:-translate-y-0.5">
|
||||
<h2 class="font-semibold text-lg mb-1">Mis préstamos</h2>
|
||||
<p class="text-sm opacity-70">Estado de tus solicitudes actuales e historial.</p>
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
import Layout from '@/layouts/Layout.astro';
|
||||
|
||||
const url = Astro.url;
|
||||
const errorParam = url.searchParams.get('error');
|
||||
const errorMsg = errorParam === 'dominio'
|
||||
? 'Debes iniciar sesión con tu correo institucional @uabc.edu.mx'
|
||||
: errorParam === 'oauth'
|
||||
? 'No se pudo completar la autenticación con Google. Inténtalo de nuevo.'
|
||||
: null;
|
||||
|
||||
const appUrl = import.meta.env.PUBLIC_APP_URL ?? url.origin;
|
||||
const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
|
||||
const redirectTo = `${appUrl}/api/auth/callback`;
|
||||
const googleAuthUrl = `${supabaseUrl}/auth/v1/authorize?provider=google&redirect_to=${encodeURIComponent(redirectTo)}`;
|
||||
---
|
||||
<Layout title="Iniciar sesión — LabPréstamos UABC">
|
||||
<main id="main" class="min-h-screen grid place-items-center p-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-grid place-items-center w-16 h-16 rounded-2xl bg-[color:var(--color-primary)] text-white font-bold text-3xl mb-4 motion-safe:animate-[fadein_.4s_ease-out]">L</div>
|
||||
<h1 class="text-2xl md:text-3xl font-semibold">Sistema de Préstamos</h1>
|
||||
<p class="text-sm mt-2 opacity-70">Laboratorio de Sistemas Computacionales · UABC</p>
|
||||
</div>
|
||||
|
||||
<div class="card motion-safe:animate-[fadein_.5s_ease-out]">
|
||||
<h2 class="text-lg font-semibold mb-1">Inicia sesión</h2>
|
||||
<p class="text-sm opacity-70 mb-6">Accede con tu cuenta institucional.</p>
|
||||
|
||||
<a href={googleAuthUrl} class="btn btn-primary w-full">
|
||||
<svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
|
||||
<path fill="#fff" d="M44.5 20H24v8.5h11.7C34.4 33.4 29.7 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c2.9 0 5.5 1 7.6 2.7l6.2-6.2C33.8 5.1 29.2 3 24 3 12.4 3 3 12.4 3 24s9.4 21 21 21c11 0 20-8 20-21 0-1.4-.1-2.7-.5-4z"/>
|
||||
</svg>
|
||||
Continuar con Google
|
||||
</a>
|
||||
|
||||
{errorMsg && (
|
||||
<div role="alert" class="mt-4 rounded-lg p-3 text-sm" style="background: color-mix(in oklab, var(--color-danger) 12%, transparent); color: var(--color-danger);">
|
||||
{errorMsg}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p class="text-center text-xs opacity-60 mt-6">
|
||||
Acceso exclusivo con correo institucional <strong>@uabc.edu.mx</strong>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style is:global>
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user