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>

src/pages/alumno/catalogo.astro

@@ -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>