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/components/admin/inventario/EliminarMaterial.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useRef, useState } from 'react';
+
+type Props = {
+  id: number;
+  nombre: string;
+  tienePrestamos?: boolean;
+};
+
+export default function EliminarMaterial({ id, nombre, tienePrestamos }: Props) {
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const titleId = `del-mat-${id}`;
+
+  const open = () => {
+    setError(null);
+    dialogRef.current?.showModal();
+  };
+  const close = () => {
+    if (loading) return;
+    dialogRef.current?.close();
+  };
+
+  useEffect(() => {
+    const dlg = dialogRef.current;
+    if (!dlg) return;
+    const onClick = (e: MouseEvent) => {
+      if (e.target === dlg) close();
+    };
+    dlg.addEventListener('click', onClick);
+    return () => dlg.removeEventListener('click', onClick);
+  });
+
+  const submit = async () => {
+    if (loading) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/admin/materiales/${id}`, { method: 'DELETE' });
+      const json = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(json?.error ?? 'No se pudo eliminar');
+      dialogRef.current?.close();
+      location.reload();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Error inesperado');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        className="btn btn-ghost transition-colors duration-150 hover:!text-white"
+        style={{ minHeight: '36px', paddingBlock: '0.25rem' }}
+        onClick={open}
+        onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-danger)')}
+        onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
+      >
+        Eliminar
+      </button>
+
+      <dialog
+        ref={dialogRef}
+        aria-labelledby={titleId}
+        className="rounded-lg p-0 bg-white text-[color:var(--color-ink)] backdrop:bg-black/40 w-[min(92vw,26rem)]"
+      >
+        <div className="p-5 sm:p-6 flex flex-col gap-4">
+          <h2 id={titleId} className="text-lg font-semibold">
+            Eliminar material
+          </h2>
+          <p className="text-sm">
+            ¿Seguro que quieres eliminar <strong>{nombre}</strong>? Esta acción no se puede deshacer.
+          </p>
+          {tienePrestamos && (
+            <p className="text-sm" style={{ color: 'var(--color-danger)' }}>
+              Este material tiene préstamos asociados y no podrá eliminarse.
+            </p>
+          )}
+          {error && (
+            <p role="alert" className="text-sm" style={{ color: 'var(--color-danger)' }}>
+              {error}
+            </p>
+          )}
+          <div className="flex gap-2 justify-end pt-2">
+            <button type="button" className="btn btn-ghost" onClick={close} disabled={loading}>
+              Cancelar
+            </button>
+            <button
+              type="button"
+              className="btn"
+              style={{ background: 'var(--color-danger)', color: 'white' }}
+              onClick={submit}
+              disabled={loading}
+            >
+              {loading ? 'Eliminando…' : 'Eliminar'}
+            </button>
+          </div>
+        </div>
+      </dialog>
+    </>
+  );
+}