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