feat(web): add groups page with RouteManager and route handler proxies

Implements the Groups & Routes admin page with a client-side RouteManager
component (add/delete sync routes via fetch), server-side groups page that
pre-fetches groups/routes from the API, and Next.js Route Handler proxies
for /api/routes (GET, POST) and /api/routes/[id] (DELETE). Adds a custom
jest environment that polyfills Node 18+ native fetch into the jsdom sandbox
so tests can use jest.spyOn(global, 'fetch').

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-28 01:37:13 +05:30
parent 71e2b0681c
commit 1389a65e18
8 changed files with 300 additions and 1 deletions
+40
View File
@@ -0,0 +1,40 @@
import { RouteManager } from './RouteManager';
interface Group {
id: string;
name: string;
platform: string;
}
interface Route {
id: string;
sourceGroupId: string;
targetGroupId: string;
sourceGroup: { name: string };
targetGroup: { name: string };
}
async function fetchJson<T>(url: string): Promise<T | null> {
try {
const res = await fetch(url, { cache: 'no-store' });
if (!res.ok) return null;
return res.json();
} catch {
return null;
}
}
export default async function GroupsPage() {
const apiUrl = process.env.API_URL ?? 'http://localhost:3001';
const [groups, routes] = await Promise.all([
fetchJson<Group[]>(`${apiUrl}/groups`),
fetchJson<Route[]>(`${apiUrl}/routes`),
]);
return (
<div className="max-w-2xl">
<h1 className="text-xl font-semibold mb-6">Groups &amp; Routes</h1>
<RouteManager groups={groups ?? []} initialRoutes={routes ?? []} />
</div>
);
}