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>
2026-05-28 01:37:13 +05:30
parent 71e2b0681c
commit 1389a65e18
8 changed files with 300 additions and 1 deletions
@@ -0,0 +1,123 @@
+'use client';
+
+import { useState } from 'react';
+
+interface Group {
+  id: string;
+  name: string;
+  platform: string;
+}
+
+interface Route {
+  id: string;
+  sourceGroupId: string;
+  targetGroupId: string;
+  sourceGroup: { name: string };
+  targetGroup: { name: string };
+}
+
+export function RouteManager({
+  groups,
+  initialRoutes,
+}: {
+  groups: Group[];
+  initialRoutes: Route[];
+}) {
+  const [routes, setRoutes] = useState<Route[]>(initialRoutes);
+  const [sourceId, setSourceId] = useState('');
+  const [targetId, setTargetId] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  async function addRoute() {
+    if (!sourceId || !targetId) return;
+    setBusy(true);
+    try {
+      const res = await fetch('/api/routes', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sourceGroupId: sourceId, targetGroupId: targetId }),
+      });
+      if (!res.ok) return;
+      const created: Route = await res.json();
+      setRoutes((prev) => [created, ...prev]);
+      setSourceId('');
+      setTargetId('');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function deleteRoute(id: string) {
+    const res = await fetch(`/api/routes/${id}`, { method: 'DELETE' });
+    if (res.ok) setRoutes((prev) => prev.filter((r) => r.id !== id));
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <section>
+        <h2 className="text-base font-semibold mb-3">Active sync routes</h2>
+        {routes.length === 0 ? (
+          <p className="text-sm text-gray-400">No routes configured.</p>
+        ) : (
+          <ul className="flex flex-col gap-2">
+            {routes.map((route) => (
+              <li
+                key={route.id}
+                className="flex items-center justify-between rounded-lg border border-gray-200 bg-white px-4 py-3"
+              >
+                <span className="text-sm">
+                  <span className="font-medium">{route.sourceGroup.name}</span>
+                  <span className="mx-2 text-gray-400">→</span>
+                  <span className="font-medium">{route.targetGroup.name}</span>
+                </span>
+                <button
+                  onClick={() => deleteRoute(route.id)}
+                  className="text-xs text-red-500 hover:underline"
+                  aria-label="Delete route"
+                >
+                  Delete
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section>
+        <h2 className="text-base font-semibold mb-3">Add route</h2>
+        <div className="flex gap-2 items-center flex-wrap">
+          <select
+            value={sourceId}
+            onChange={(e) => setSourceId(e.target.value)}
+            className="rounded-lg border border-gray-200 px-3 py-2 text-sm"
+            aria-label="Source group"
+          >
+            <option value="">Source group…</option>
+            {groups.map((g) => (
+              <option key={g.id} value={g.id}>{g.name}</option>
+            ))}
+          </select>
+          <span className="text-gray-400">→</span>
+          <select
+            value={targetId}
+            onChange={(e) => setTargetId(e.target.value)}
+            className="rounded-lg border border-gray-200 px-3 py-2 text-sm"
+            aria-label="Target group"
+          >
+            <option value="">Target group…</option>
+            {groups.map((g) => (
+              <option key={g.id} value={g.id}>{g.name}</option>
+            ))}
+          </select>
+          <button
+            onClick={addRoute}
+            disabled={!sourceId || !targetId || busy}
+            className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+          >
+            Add route
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}