feat: isolate all four portals with route groups + polished design system

Fix blank /org/login (and /admin/login): the guarded portal layout was wrapping its own login route, rendering null when unauthenticated. Move each portal's authed pages into a (authed)/(chapter) route group so login pages live outside the guard. Structure: - app/(chapter)/* — chapter admin pages + guarded layout (was root-level) - app/org/(authed)/* — org pages + guarded layout; /org/login now free - app/admin/(authed)/* — admin pages + guarded layout; /admin/login free - Root layout slimmed to providers only (no shared sidebar) - Convert moved files' relative imports to @/app alias Design system: - PortalShell: shared sidebar shell (brand mark, themed active nav with accent bar, avatar dropdown user menu, loading skeletons) - portal-theme.ts: per-portal theme tokens (violet/slate/blue/emerald) - PortalLoginShell redesigned: two-column with gradient branding panel, dotted pattern, value-prop highlights, built-in back link - New shadcn components: Avatar, DropdownMenu, Skeleton - Move shared DraftCard to _components/draft-card.tsx (used by 2 portals) - Portal selector: remove Super Admin card, icon tiles, hover lift - All 4 login pages use react-hook-form + Zod + themed shell - Member nav restored to full 11-section list with icons Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-20 18:20:06 +05:30
parent d7b5988858
commit 205418fc4e
50 changed files with 619 additions and 360 deletions
@@ -0,0 +1,109 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { RouteManager } from './RouteManager';
+
+const groups = [
+  { id: 'grp_1', name: 'Alpha', platform: 'whatsapp', isActive: true },
+  { id: 'grp_2', name: 'Beta', platform: 'whatsapp', isActive: true },
+  { id: 'grp_3', name: 'Gamma', platform: 'whatsapp', isActive: true },
+];
+
+const routes = [
+  {
+    id: 'rt_1',
+    sourceGroupId: 'grp_1',
+    targetGroupId: 'grp_2',
+    sourceGroup: { name: 'Alpha' },
+    targetGroup: { name: 'Beta' },
+  },
+];
+
+let fetchSpy: jest.SpyInstance;
+
+beforeEach(() => {
+  fetchSpy = jest.spyOn(global, 'fetch');
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('RouteManager', () => {
+  it('renders routes grouped by source group', () => {
+    render(<RouteManager groups={groups} initialRoutes={routes} />);
+    expect(screen.getByText('Alpha')).toBeInTheDocument();
+    expect(screen.getByText('Beta')).toBeInTheDocument();
+  });
+
+  it('shows source dropdown and target checkboxes', () => {
+    render(<RouteManager groups={groups} initialRoutes={routes} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
+  });
+
+  it('shows target checkboxes when a source is selected', () => {
+    render(<RouteManager groups={groups} initialRoutes={routes} />);
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'grp_1' } });
+    expect(screen.getAllByRole('checkbox')).toHaveLength(2);
+  });
+
+  it('calls POST /api/routes/batch with selected targetIds', async () => {
+    fetchSpy.mockResolvedValueOnce(
+      new Response(
+        JSON.stringify([
+          { id: 'rt_new', sourceGroupId: 'grp_1', targetGroupId: 'grp_2', sourceGroup: { name: 'Alpha' }, targetGroup: { name: 'Beta' } },
+          { id: 'rt_new2', sourceGroupId: 'grp_1', targetGroupId: 'grp_3', sourceGroup: { name: 'Alpha' }, targetGroup: { name: 'Gamma' } },
+        ]),
+        { status: 201, headers: { 'Content-Type': 'application/json' } },
+      ),
+    );
+    render(<RouteManager groups={groups} initialRoutes={[]} />);
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'grp_1' } });
+    const checkboxes = screen.getAllByRole('checkbox');
+    fireEvent.click(checkboxes[0]);
+    fireEvent.click(checkboxes[1]);
+    fireEvent.click(screen.getByRole('button', { name: /create 2 routes/i }));
+    await waitFor(() => {
+      expect(fetchSpy).toHaveBeenCalledWith(
+        '/api/routes/batch',
+        expect.objectContaining({
+          method: 'POST',
+          body: JSON.stringify({ sourceGroupId: 'grp_1', targetGroupIds: ['grp_2', 'grp_3'] }),
+        }),
+      );
+    });
+  });
+
+  it('shows error message on 409 conflict', async () => {
+    fetchSpy.mockResolvedValueOnce(
+      new Response(
+        JSON.stringify({ message: 'Routes already exist for: Beta' }),
+        { status: 409, headers: { 'Content-Type': 'application/json' } },
+      ),
+    );
+    render(<RouteManager groups={groups} initialRoutes={routes} />);
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'grp_1' } });
+    fireEvent.click(screen.getAllByRole('checkbox')[0]);
+    fireEvent.click(screen.getByRole('button', { name: /create 1 route/i }));
+    await waitFor(() => {
+      expect(screen.getByText('Routes already exist for: Beta')).toBeInTheDocument();
+    });
+  });
+
+  it('shows a delete button for each existing route', () => {
+    render(<RouteManager groups={groups} initialRoutes={routes} />);
+    const deleteBtn = screen.getByRole('button', { name: /delete route to beta/i });
+    expect(deleteBtn).toBeInTheDocument();
+  });
+
+  it('calls DELETE /api/routes/:id when a route is deleted', async () => {
+    fetchSpy.mockResolvedValueOnce(new Response(null, { status: 204 }));
+    render(<RouteManager groups={groups} initialRoutes={routes} />);
+    fireEvent.click(screen.getByRole('button', { name: /delete route to beta/i }));
+    await waitFor(() => {
+      expect(fetchSpy).toHaveBeenCalledWith(
+        '/api/routes/rt_1',
+        expect.objectContaining({ method: 'DELETE' }),
+      );
+    });
+  });
+});