linumiq_net-web_app/app/admin/users/users-table.tsx

'use client';

import { useCallback, useEffect, useRef, useState } from 'react';
import Link from 'next/link';
import { formatBytes, formatDate } from '@/lib/format';
import type { AdminUserItem } from '@/lib/admin/list';

const PER_PAGE = 25;

function isBanned(u: AdminUserItem): boolean {
  return !!u.banned_until && new Date(u.banned_until).getTime() > Date.now();
}

export function UsersTable({
  initialUsers,
  initialTotal,
}: {
  initialUsers: AdminUserItem[];
  initialTotal: number;
}) {
  const [users, setUsers] = useState<AdminUserItem[]>(initialUsers);
  const [total, setTotal] = useState(initialTotal);
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams({
        page: String(page),
        perPage: String(PER_PAGE),
      });
      if (search.trim()) params.set('search', search.trim());
      const res = await fetch(`/api/admin/users?${params.toString()}`, {
        credentials: 'same-origin',
      });
      if (!res.ok) {
        const b = (await res.json().catch(() => ({}))) as { error?: string };
        throw new Error(b.error ?? `Request failed (${res.status})`);
      }
      const data = (await res.json()) as {
        users: AdminUserItem[];
        total: number;
      };
      setUsers(data.users);
      setTotal(data.total);
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setLoading(false);
    }
  }, [page, search]);

  // The first page is rendered from server-supplied data (see the parent server
  // component), so skip the initial on-mount fetch — that on-mount request used
  // to race the SSR session-cookie refresh and intermittently 401.
  const didMount = useRef(false);
  useEffect(() => {
    if (!didMount.current) {
      didMount.current = true;
      return;
    }
    const t = setTimeout(load, 250);
    return () => clearTimeout(t);
  }, [load]);

  const totalPages = Math.max(1, Math.ceil(total / PER_PAGE));

  return (
    <div>
      <h1>Users</h1>

      <div className="row" style={{ marginBottom: '1rem' }}>
        <input
          type="text"
          placeholder="Search by email…"
          value={search}
          onChange={(e) => {
            setPage(1);
            setSearch(e.target.value);
          }}
          style={{ maxWidth: 320 }}
        />
        <button className="secondary btn-sm" onClick={load} type="button">
          Refresh
        </button>
      </div>

      {error && <p className="error">{error}</p>}

      {loading ? (
        <p className="muted">Loading…</p>
      ) : users.length === 0 ? (
        <p className="muted">No users found.</p>
      ) : (
        <div className="admin-table-wrap">
          <table className="admin-table">
            <thead>
              <tr>
                <th>Email</th>
                <th>Role</th>
                <th>Status</th>
                <th>Tunnel</th>
                <th>Usage</th>
                <th>Created</th>
              </tr>
            </thead>
            <tbody>
              {users.map((u) => (
                <tr key={u.id}>
                  <td>
                    <Link href={`/admin/users/${u.id}`}>
                      {u.email ?? u.id}
                    </Link>
                  </td>
                  <td>
                    {u.role === 'admin' ? (
                      <span className="badge badge-admin">admin</span>
                    ) : (
                      <span className="badge">user</span>
                    )}
                  </td>
                  <td>
                    {isBanned(u) ? (
                      <span className="badge badge-banned">banned</span>
                    ) : u.email_confirmed_at ? (
                      <span className="badge badge-ok">confirmed</span>
                    ) : (
                      <span className="badge">unconfirmed</span>
                    )}
                  </td>
                  <td>{u.tunnel ? u.tunnel.subdomain : '—'}</td>
                  <td>
                    {u.tunnel
                      ? `${formatBytes(u.tunnel.bytes_used)} / ${formatBytes(
                          u.tunnel.quota_bytes,
                        )}`
                      : '—'}
                  </td>
                  <td>{formatDate(u.created_at)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <div className="row" style={{ marginTop: '1rem' }}>
        <button
          className="secondary btn-sm"
          type="button"
          disabled={page <= 1}
          onClick={() => setPage((p) => Math.max(1, p - 1))}
        >
          Prev
        </button>
        <span className="muted">
          Page {page} of {totalPages} ({total} total)
        </span>
        <button
          className="secondary btn-sm"
          type="button"
          disabled={page >= totalPages}
          onClick={() => setPage((p) => p + 1)}
        >
          Next
        </button>
      </div>
    </div>
  );
}