labre-web/src/pages/admin/solicitudes/activos.astro

---
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>
                      {r.notas && (
                        <div class="text-xs mt-1.5 opacity-80 border-l-2 pl-2" style="border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);">
                          <span class="opacity-60">Motivo:</span> {r.notas}
                        </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>
                {r.notas && (
                  <p class="text-sm mt-2 opacity-80 border-l-2 pl-2" style="border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);">
                    <span class="opacity-60">Motivo:</span> {r.notas}
                  </p>
                )}
                <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>