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,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>
|
||||
Reference in New Issue
Block a user