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>
2026-04-22 16:54:44 +07:00
parent 1668c800fe
commit 3a9e44758c
29 changed files with 1418 additions and 69 deletions
--- a/apps/web/app/[locale]/(auth)/tests/login.spec.tsx
+++ b/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(),
--- a/apps/web/app/[locale]/(auth)/tests/register.spec.tsx
+++ b/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(),
--- a/apps/web/app/[locale]/(public)/listings/tests/listings.spec.tsx
+++ b/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/'));
+    });
  });
 });
--- a/apps/web/app/[locale]/(public)/listings/page.tsx
+++ b/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"
--- a/apps/web/app/[locale]/(public)/page.tsx
+++ b/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 */
--- a/apps/web/app/favicon.ico
+++ b/apps/web/app/favicon.ico
--- a/apps/web/lib/analytics-api.ts
+++ b/apps/web/lib/analytics-api.ts
@@ -1,5 +1,23 @@
 import { apiClient } from './api-client';

+/**
+ * Backend `/analytics/*` endpoints are wrapped by `CacheMetaInterceptor`,
+ * returning `{ data: T, cacheMeta: {...} }`. This helper unwraps so callers
+ * receive plain `T` (the cacheMeta field is currently unused on the client).
+ */
+interface CacheMetaEnvelope<T> {
+  data: T;
+  cacheMeta: { cachedAt: string | null; nextRefreshAt: string | null; source: string };
+}
+
+async function unwrap<T>(p: Promise<CacheMetaEnvelope<T> | T>): Promise<T> {
+  const raw = await p;
+  if (raw && typeof raw === 'object' && 'data' in raw && 'cacheMeta' in raw) {
+    return (raw as CacheMetaEnvelope<T>).data;
+  }
+  return raw as T;
+}
+
 export interface MarketReportDistrict {
  district: string;
  city: string;
@@ -201,51 +219,89 @@ export interface TrendingAreasResponse {
 }

 export const analyticsApi = {
+  // All /analytics/* endpoints are wrapped by the backend CacheMetaInterceptor.
+  // We unwrap the `{ data, cacheMeta }` envelope so callers get the plain DTO.
  getMarketReport: (city: string, period: string, propertyType?: string) => {
    const params = new URLSearchParams({ city, period });
    if (propertyType) params.set('propertyType', propertyType);
-    return apiClient.get<MarketReportResponse>(`/analytics/market-report?${params}`);
+    return unwrap<MarketReportResponse>(
+      apiClient.get<CacheMetaEnvelope<MarketReportResponse>>(
+        `/analytics/market-report?${params}`,
+      ),
+    );
  },

  getHeatmap: (city: string, period: string) => {
    const params = new URLSearchParams({ city, period });
-    return apiClient.get<HeatmapResponse>(`/analytics/heatmap?${params}`);
+    return unwrap<HeatmapResponse>(
+      apiClient.get<CacheMetaEnvelope<HeatmapResponse>>(`/analytics/heatmap?${params}`),
+    );
  },

  getPriceTrend: (district: string, city: string, propertyType: string, periods: string[]) => {
    const params = new URLSearchParams({ district, city, propertyType, periods: periods.join(',') });
-    return apiClient.get<PriceTrendResponse>(`/analytics/price-trend?${params}`);
+    return unwrap<PriceTrendResponse>(
+      apiClient.get<CacheMetaEnvelope<PriceTrendResponse>>(
+        `/analytics/price-trend?${params}`,
+      ),
+    );
  },

  getDistrictStats: (city: string, period: string) => {
    const params = new URLSearchParams({ city, period });
-    return apiClient.get<DistrictStatsResponse>(`/analytics/district-stats?${params}`);
+    return unwrap<DistrictStatsResponse>(
+      apiClient.get<CacheMetaEnvelope<DistrictStatsResponse>>(
+        `/analytics/district-stats?${params}`,
+      ),
+    );
  },

  getNearbyPOIs: (lat: number, lng: number, radius = 2000, limit = 30) =>
-    apiClient.get<NearbyPOIsResponse>(
-      `/analytics/pois/nearby?lat=${lat}&lng=${lng}&radius=${radius}&limit=${limit}`,
+    unwrap<NearbyPOIsResponse>(
+      apiClient.get<CacheMetaEnvelope<NearbyPOIsResponse>>(
+        `/analytics/pois/nearby?lat=${lat}&lng=${lng}&radius=${radius}&limit=${limit}`,
+      ),
    ),

  getListingAiAdvice: (listingId: string) =>
-    apiClient.post<ListingAiAdvice>(`/analytics/listings/${listingId}/ai-advice`),
+    unwrap<ListingAiAdvice>(
+      apiClient.post<CacheMetaEnvelope<ListingAiAdvice>>(
+        `/analytics/listings/${listingId}/ai-advice`,
+      ),
+    ),

  getProjectAiAdvice: (projectId: string) =>
-    apiClient.post<ProjectAiAdvice>(`/analytics/projects/${projectId}/ai-advice`),
+    unwrap<ProjectAiAdvice>(
+      apiClient.post<CacheMetaEnvelope<ProjectAiAdvice>>(
+        `/analytics/projects/${projectId}/ai-advice`,
+      ),
+    ),

  getMarketSnapshot: (city: string, propertyType?: string) => {
    const params = new URLSearchParams({ city });
    if (propertyType) params.set('propertyType', propertyType);
-    return apiClient.get<MarketSnapshotResponse>(`/analytics/market-snapshot?${params}`);
+    return unwrap<MarketSnapshotResponse>(
+      apiClient.get<CacheMetaEnvelope<MarketSnapshotResponse>>(
+        `/analytics/market-snapshot?${params}`,
+      ),
+    );
  },

  getPriceMovers: (direction: 'up' | 'down', period = '7d', limit = 5) => {
    const params = new URLSearchParams({ direction, period, limit: String(limit) });
-    return apiClient.get<PriceMoversResponse>(`/analytics/price-movers?${params}`);
+    return unwrap<PriceMoversResponse>(
+      apiClient.get<CacheMetaEnvelope<PriceMoversResponse>>(
+        `/analytics/price-movers?${params}`,
+      ),
+    );
  },

  getTrendingAreas: (period = 7, limit = 10) => {
-    const params = new URLSearchParams({ period: `${period}d`, limit: String(limit) });
-    return apiClient.get<TrendingAreasResponse>(`/analytics/trending-areas?${params}`);
+    const params = new URLSearchParams({ period: String(period), limit: String(limit) });
+    return unwrap<TrendingAreasResponse>(
+      apiClient.get<CacheMetaEnvelope<TrendingAreasResponse>>(
+        `/analytics/trending-areas?${params}`,
+      ),
+    );
  },
 };
--- a/apps/web/lib/hooks/use-analytics.ts
+++ b/apps/web/lib/hooks/use-analytics.ts
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { analyticsApi } from '@/lib/analytics-api';
+import { useAuthStore } from '@/lib/auth-store';

 export const analyticsKeys = {
  all: ['analytics'] as const,
@@ -19,24 +20,43 @@ export const analyticsKeys = {
    ['analytics', 'trending-areas', period] as const,
 };

+/**
+ * Analytics endpoints require authentication on the backend. Guard React Query
+ * hooks with `isAuthenticated` so unauthenticated visitors on public routes
+ * (e.g. homepage) do not fire requests that return 401 and spam the console.
+ */
+function useAuthedAnalytics() {
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const isInitialized = useAuthStore((s) => s.isInitialized);
+  // Only enable queries once auth state has initialized to avoid a spurious
+  // disabled → enabled transition on first paint.
+  return isInitialized && isAuthenticated;
+}
+
 export function useMarketReport(city: string, period: string) {
+  const enabled = useAuthedAnalytics();
  return useQuery({
    queryKey: analyticsKeys.marketReport(city, period),
    queryFn: () => analyticsApi.getMarketReport(city, period),
+    enabled,
  });
 }

 export function useHeatmap(city: string, period: string) {
+  const enabled = useAuthedAnalytics();
  return useQuery({
    queryKey: analyticsKeys.heatmap(city, period),
    queryFn: () => analyticsApi.getHeatmap(city, period),
+    enabled,
  });
 }

 export function useDistrictStats(city: string, period: string) {
+  const enabled = useAuthedAnalytics();
  return useQuery({
    queryKey: analyticsKeys.districtStats(city, period),
    queryFn: () => analyticsApi.getDistrictStats(city, period),
+    enabled,
  });
 }

@@ -46,31 +66,38 @@ export function usePriceTrend(
  propertyType: string,
  periods: string[],
 ) {
+  const authed = useAuthedAnalytics();
  return useQuery({
    queryKey: analyticsKeys.priceTrend(district, city, propertyType, periods),
    queryFn: () => analyticsApi.getPriceTrend(district, city, propertyType, periods),
-    enabled: !!district && !!city,
+    enabled: authed && !!district && !!city,
  });
 }

 export function useMarketSnapshot(city: string) {
+  const enabled = useAuthedAnalytics();
  return useQuery({
    queryKey: analyticsKeys.marketSnapshot(city),
    queryFn: () => analyticsApi.getMarketSnapshot(city),
    refetchInterval: 5 * 60 * 1000,
+    enabled,
  });
 }

 export function usePriceMovers(direction: 'up' | 'down', period = '7d', limit = 5) {
+  const enabled = useAuthedAnalytics();
  return useQuery({
    queryKey: analyticsKeys.priceMovers(direction, period),
    queryFn: () => analyticsApi.getPriceMovers(direction, period, limit),
+    enabled,
  });
 }

 export function useTrendingAreas(period = 7, limit = 10) {
+  const enabled = useAuthedAnalytics();
  return useQuery({
    queryKey: analyticsKeys.trendingAreas(period),
    queryFn: () => analyticsApi.getTrendingAreas(period, limit),
+    enabled,
  });
 }
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -43,7 +43,7 @@ const nextConfig = {
              "style-src 'self' 'unsafe-inline' https://api.mapbox.com",
              "img-src 'self' data: blob: https://*.mapbox.com https://*.tiles.mapbox.com https:",
              "font-src 'self' data:",
-              `connect-src 'self' https://*.mapbox.com https://api.mapbox.com https://events.mapbox.com https://api.goodgo.vn${process.env.NODE_ENV !== 'production' ? ' http://localhost:3001 http://localhost:3011 http://localhost:9000 ws://localhost:3001 ws://localhost:3011' : ''}`,
+              `connect-src 'self' https://*.mapbox.com https://api.mapbox.com https://events.mapbox.com https://api.goodgo.vn${process.env.NODE_ENV !== 'production' ? ' http://localhost:3001 http://localhost:3011 http://localhost:3200 http://localhost:3201 http://localhost:9000 ws://localhost:3001 ws://localhost:3011 ws://localhost:3200 ws://localhost:3201' : ''}`,
              "worker-src 'self' blob:",
              "child-src 'self' blob:",
              "frame-ancestors 'none'",
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -3,7 +3,7 @@
  "version": "0.0.1",
  "private": true,
  "scripts": {
-    "dev": "next dev --port 3000",
+    "dev": "next dev --port 3200",
    "build": "next build",
    "start": "next start",
    "lint": "eslint src/ app/ components/ lib/ hooks/ i18n/ --no-error-on-unmatched-pattern",