9c60d11c2c
- Fix dialog scrollability (flex layout + max-h-[90dvh]) and increase L4 dialog to lg width - Add styled enable card to L4 dialog matching proxy host pattern - Unify section colors across proxy host and L4 dialogs (cyan=LB, emerald=DNS, violet=upstream DNS, rose=geo, amber=mTLS) - Improve light mode contrast: muted-foreground oklch 0.552→0.502, remove opacity modifiers on secondary text - Improve dark mode: boost muted-foreground to 0.85, increase border opacity 10%→16%, input 15%→20% - Add bg-card to DataTable wrapper and bg-muted/40 to table headers for surface hierarchy - Add semantic badge variants (success, warning, info, muted) and StatusChip dark mode fix - Add server-side sortable columns to Proxy Hosts and L4 Proxy Hosts (name, upstream, status, protocol, listen) - Add sortKey to DataTable Column type with clickable sort headers (ArrowUp/Down indicators, URL param driven) - Fix E2E test selectors for shadcn UI (label associations, combobox roles, dropdown menus, mobile drawer) - Add htmlFor/id to proxy host form fields and aria-labels to select triggers for accessibility - Add sorting E2E tests for both proxy host pages Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import L4ProxyHostsClient from "./L4ProxyHostsClient";
|
|
import { listL4ProxyHostsPaginated, countL4ProxyHosts } from "@/src/lib/models/l4-proxy-hosts";
|
|
import { requireAdmin } from "@/src/lib/auth";
|
|
|
|
const PER_PAGE = 25;
|
|
|
|
interface PageProps {
|
|
searchParams: Promise<{ page?: string; search?: string; sortBy?: string; sortDir?: string }>;
|
|
}
|
|
|
|
export default async function L4ProxyHostsPage({ searchParams }: PageProps) {
|
|
await requireAdmin();
|
|
const { page: pageParam, search: searchParam, sortBy: sortByParam, sortDir: sortDirParam } = await searchParams;
|
|
const page = Math.max(1, parseInt(pageParam ?? "1", 10) || 1);
|
|
const search = searchParam?.trim() || undefined;
|
|
const offset = (page - 1) * PER_PAGE;
|
|
const sortBy = sortByParam || undefined;
|
|
const sortDir = (sortDirParam === "asc" || sortDirParam === "desc") ? sortDirParam : "desc";
|
|
|
|
const [hosts, total] = await Promise.all([
|
|
listL4ProxyHostsPaginated(PER_PAGE, offset, search, sortBy, sortDir),
|
|
countL4ProxyHosts(search),
|
|
]);
|
|
|
|
return (
|
|
<L4ProxyHostsClient
|
|
hosts={hosts}
|
|
pagination={{ total, page, perPage: PER_PAGE }}
|
|
initialSearch={search ?? ""}
|
|
initialSort={{ sortBy: sortBy ?? "created_at", sortDir }}
|
|
/>
|
|
);
|
|
}
|