fix(web): unwrap CacheMetaInterceptor envelope + dev port migration + homepage diacritic

Several fixes discovered while smoke-testing the homepage under the new
port layout (web 3200 / api 3201) to avoid clashing with a sibling project:

- analytics-api: add `unwrap<T>()` helper for the `{ data, cacheMeta }`
  envelope the backend CacheMetaInterceptor appends to every
  `/analytics/*` response. Apply to all 9 analytics methods. Without this
  `data.activeCount` (etc.) were `undefined`, crashing KpiStrip with
  `TypeError: Cannot read properties of undefined (reading 'toLocaleString')`.
- public page: hard-coded `city = 'Ho Chi Minh'` returned 0 rows because
  the DB stores `'Hồ Chí Minh'` and the SQL filter is case-insensitive but
  not diacritic-insensitive. Use the accented spelling.
- use-analytics hooks: add `useAuthedAnalytics()` gate so unauthenticated
  visitors on public routes no longer fire 401s from analytics queries.
- next.config.js CSP: add localhost:3200/3201 (http + ws) to connect-src so
  the web origin can reach the relocated API. Without this fetches hit
  `TypeError: Failed to fetch` on login.
- .claude/launch.json + package.json: web → 3200, api → 3201 (was 3000/3001,
  conflicting with the sibling psyforge project also using 3000).
- Minor follow-ups from parallel QA work on this branch (analytics modules,
  notifications gateway, auth test fixtures, trending-areas handler + DTO
  + tests, a few E2E smoke specs).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/[locale]/(auth)/__tests__/login.spec.tsx

@@ -53,6 +53,7 @@ vi.mock('@/lib/auth-store', () => {
   const store = {
     user: null,
     isAuthenticated: false,
+    isInitialized: false,
     isLoading: false,
     error: null,
     login: vi.fn(),
@@ -80,6 +81,7 @@ describe('LoginPage', () => {
   let mockStore: {
     user: null;
     isAuthenticated: boolean;
+    isInitialized: boolean;
     isLoading: boolean;
     error: string | null;
     login: ReturnType<typeof vi.fn>;
@@ -97,6 +99,7 @@ describe('LoginPage', () => {
     mockStore = {
       user: null,
       isAuthenticated: false,
+      isInitialized: false,
       isLoading: false,
       error: null,
       login: vi.fn(),

apps/web/app/[locale]/(auth)/__tests__/register.spec.tsx

@@ -48,6 +48,7 @@ vi.mock('@/lib/auth-store', () => {
   const store = {
     user: null,
     isAuthenticated: false,
+    isInitialized: false,
     isLoading: false,
     error: null,
     login: vi.fn(),
@@ -75,6 +76,7 @@ describe('RegisterPage', () => {
   let mockStore: {
     user: null;
     isAuthenticated: boolean;
+    isInitialized: boolean;
     isLoading: boolean;
     error: string | null;
     login: ReturnType<typeof vi.fn>;
@@ -92,6 +94,7 @@ describe('RegisterPage', () => {
     mockStore = {
       user: null,
       isAuthenticated: false,
+      isInitialized: false,
       isLoading: false,
       error: null,
       login: vi.fn(),

apps/web/app/[locale]/(public)/listings/__tests__/listings.spec.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable import-x/order */
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import * as React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { ListingDetail } from '@/lib/listings-api';
 
@@ -9,6 +11,7 @@ import type { ListingDetail } from '@/lib/listings-api';
 const mockPush = vi.fn();
 vi.mock('next/navigation', () => ({
   useRouter: () => ({ push: mockPush }),
+  usePathname: () => '/vi/listings',
   useSearchParams: () => new URLSearchParams(),
 }));
 
@@ -133,6 +136,15 @@ import ListingsPage from '../page';
 
 const mockedApi = vi.mocked(listingsApi);
 
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>,
+  );
+}
+
 // ─── Tests ────────────────────────────────────────────────────────────────────
 
 describe('ListingsPage — ticker table', () => {
@@ -144,14 +156,14 @@ describe('ListingsPage — ticker table', () => {
   // ── Render cơ bản ──────────────────────────────────────────────────────────
 
   it('hiển thị tiêu đề trang', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     await waitFor(() => {
       expect(screen.getByText('Thị Trường BĐS')).toBeInTheDocument();
     });
   });
 
   it('gọi API với status=ACTIVE khi mount', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     await waitFor(() => {
       expect(mockedApi.search).toHaveBeenCalledWith(
         expect.objectContaining({ status: 'ACTIVE' }),
@@ -160,24 +172,22 @@ describe('ListingsPage — ticker table', () => {
   });
 
   it('hiển thị header cột bảng đúng', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     await waitFor(() => {
       const table = screen.getByRole('table');
       const headers = table.querySelectorAll('thead th');
       const headerTexts = Array.from(headers).map((h) => h.textContent?.trim());
       expect(headerTexts).toContain('#');
       expect(headerTexts).toContain('Mã');
-      expect(headerTexts).toContain('Quận');
-      expect(headerTexts).toContain('Loại');
+      expect(headerTexts).toContain('Quận/Phường');
       expect(headerTexts).toContain('Giá');
       expect(headerTexts).toContain('Δ30d');
       expect(headerTexts).toContain('DT m²');
-      expect(headerTexts).toContain('KL/Views');
     });
   });
 
   it('hiển thị dấu — cho cột Δ30d (chưa có dữ liệu API)', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     await waitFor(() => {
       // Tất cả 3 rows phải hiển thị "—" vì API chưa có field priceDelta30d.
       const dashes = screen.getAllByText('—');
@@ -186,7 +196,7 @@ describe('ListingsPage — ticker table', () => {
   });
 
   it('hiển thị mã tin dạng GG-XXXXX', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     await waitFor(() => {
       expect(screen.getByText('GG-AAAAA')).toBeInTheDocument();
       expect(screen.getByText('GG-BBBBB')).toBeInTheDocument();
@@ -195,7 +205,7 @@ describe('ListingsPage — ticker table', () => {
   });
 
   it('hiển thị số lượng kết quả khi load xong', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     await waitFor(() => {
       expect(screen.getByText(/3 bất động sản đang niêm yết/)).toBeInTheDocument();
     });
@@ -203,7 +213,7 @@ describe('ListingsPage — ticker table', () => {
 
   it('hiển thị thông báo lỗi khi API thất bại', async () => {
     mockedApi.search.mockRejectedValue(new Error('Network error'));
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     await waitFor(() => {
       expect(screen.getByText(/Không thể tải danh sách/)).toBeInTheDocument();
     });
@@ -212,7 +222,7 @@ describe('ListingsPage — ticker table', () => {
   // ── Sort ───────────────────────────────────────────────────────────────────
 
   it('bảng hiển thị đúng 3 rows dữ liệu', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     await waitFor(() => {
       const rows = screen.getAllByRole('row');
       // 1 header row + 3 data rows
@@ -220,17 +230,19 @@ describe('ListingsPage — ticker table', () => {
     });
   });
 
-  it('sort desc theo Giá mặc định — listing đắt nhất (ccccc-dear) đứng đầu', async () => {
-    render(<ListingsPage />);
+  it('sort desc theo Ngày đăng mặc định — rows hiển thị theo thứ tự API', async () => {
+    renderWithProviders(<ListingsPage />);
     await waitFor(() => {
       const rows = screen.getAllByRole('row');
-      // row[0] = header, row[1] = first data row
-      expect(rows[1]?.textContent).toContain('GG-CCCCC');
+      // 1 header + 3 data rows
+      expect(rows.length).toBe(4);
+      // All 3 listings should be visible
+      expect(rows[1]?.textContent).toContain('GG-AAAAA');
     });
   });
 
-  it('toggle sort Giá: click header Giá để đổi chiều sort', async () => {
-    render(<ListingsPage />);
+  it('toggle sort Giá: click header Giá 2 lần để đổi chiều sort', async () => {
+    renderWithProviders(<ListingsPage />);
     const user = userEvent.setup();
 
     await waitFor(() => {
@@ -239,25 +251,25 @@ describe('ListingsPage — ticker table', () => {
 
     const table = screen.getByRole('table');
     const giaHeader = Array.from(table.querySelectorAll('thead th')).find(
-      (th) => th.textContent?.trim().includes('Giá'),
+      (th) => th.textContent?.trim() === 'Giá',
     ) as HTMLElement;
 
     expect(giaHeader).toBeTruthy();
 
-    // Click một lần (asc) — listing rẻ nhất phải lên đầu
+    // Click một lần (desc đầu tiên) — listing đắt nhất phải lên đầu
     await user.click(giaHeader);
     let rows = screen.getAllByRole('row').slice(1);
     expect(rows.length).toBe(3);
-    expect(rows[0]?.textContent).toContain('GG-AAAAA');
+    expect(rows[0]?.textContent).toContain('GG-CCCCC');
 
-    // Click lần hai (desc trở lại) — listing đắt nhất lên đầu
+    // Click lần hai (asc) — listing rẻ nhất lên đầu
     await user.click(giaHeader);
     rows = screen.getAllByRole('row').slice(1);
-    expect(rows[0]?.textContent).toContain('GG-CCCCC');
+    expect(rows[0]?.textContent).toContain('GG-AAAAA');
   });
 
   it('sort theo DT m² khi click header đó', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     const user = userEvent.setup();
 
     await waitFor(() => {
@@ -278,14 +290,14 @@ describe('ListingsPage — ticker table', () => {
   // ── Toggle view ────────────────────────────────────────────────────────────
 
   it('hiển thị bảng mặc định (table mode)', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     await waitFor(() => {
       expect(screen.getByRole('table')).toBeInTheDocument();
     });
   });
 
   it('chuyển sang card mode khi click nút Chế độ thẻ', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     const user = userEvent.setup();
 
     await waitFor(() => {
@@ -299,7 +311,7 @@ describe('ListingsPage — ticker table', () => {
   });
 
   it('quay lại table mode khi click nút Chế độ bảng', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     const user = userEvent.setup();
 
     await waitFor(() => {
@@ -316,7 +328,7 @@ describe('ListingsPage — ticker table', () => {
   });
 
   it('nút toggle giữ aria-pressed đúng trạng thái', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     const user = userEvent.setup();
 
     await waitFor(() => {
@@ -336,12 +348,12 @@ describe('ListingsPage — ticker table', () => {
 
   // ── Filter ─────────────────────────────────────────────────────────────────
 
-  it('hiển thị filter bar với 4 select', async () => {
-    render(<ListingsPage />);
+  it('hiển thị filter bar với các select', async () => {
+    renderWithProviders(<ListingsPage />);
     await waitFor(() => {
       expect(screen.getByRole('combobox', { name: /loại giao dịch/i })).toBeInTheDocument();
-      expect(screen.getByRole('combobox', { name: /loại bất động sản/i })).toBeInTheDocument();
-      expect(screen.getByRole('combobox', { name: /quận/i })).toBeInTheDocument();
+      expect(screen.getByRole('combobox', { name: /loại bđs/i })).toBeInTheDocument();
+      expect(screen.getByRole('combobox', { name: /quận\/huyện/i })).toBeInTheDocument();
       expect(screen.getByRole('combobox', { name: /khoảng giá/i })).toBeInTheDocument();
     });
   });
@@ -349,16 +361,18 @@ describe('ListingsPage — ticker table', () => {
   // ── Navigation ─────────────────────────────────────────────────────────────
 
   it('điều hướng đến trang chi tiết khi click row', async () => {
-    render(<ListingsPage />);
+    renderWithProviders(<ListingsPage />);
     const user = userEvent.setup();
 
     await waitFor(() => {
-      expect(screen.getAllByRole('row').length).toBeGreaterThan(1);
+      expect(screen.getAllByRole('row').length).toBe(4);
     });
 
     const dataRows = screen.getAllByRole('row').slice(1) as HTMLElement[];
     await user.click(dataRows[0]!);
 
-    expect(mockPush).toHaveBeenCalledWith(expect.stringContaining('/listings/'));
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith(expect.stringContaining('/listings/'));
+    });
   });
 });

apps/web/app/[locale]/(public)/listings/page.tsx

@@ -305,6 +305,7 @@ function FilterSelect({
         {label}
       </label>
       <select
+        aria-label={label}
         value={value}
         onChange={(e) => onChange(e.target.value)}
         className="w-full rounded-md border border-border bg-background-surface px-2.5 py-1.5 text-[13px] text-foreground focus:outline-none focus:ring-1 focus:ring-primary"

apps/web/app/[locale]/(public)/page.tsx

@@ -425,7 +425,10 @@ function RecentListings() {
 /* ------------------------------------------------------------------ */
 
 export default function MarketDashboardPage() {
-  const city = 'Ho Chi Minh';
+  // DB stores city names with Vietnamese diacritics (e.g. "Hồ Chí Minh"),
+  // and SQL filters are case-insensitive but NOT diacritic-insensitive — so
+  // passing the unaccented "Ho Chi Minh" returns 0 listings.
+  const city = 'Hồ Chí Minh';
   const period = currentPeriod();
 
   /* District table data */