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/api/src/modules/admin/admin.module.ts

@@ -1,4 +1,4 @@
-import { Module } from '@nestjs/common';
+import { forwardRef, Module } from '@nestjs/common';
 import { CqrsModule } from '@nestjs/cqrs';
 import { AuthModule } from '@modules/auth';
 import { ListingsModule } from '@modules/listings';
@@ -65,7 +65,7 @@ const QueryHandlers = [
 ];
 
 @Module({
-  imports: [CqrsModule, AuthModule, ListingsModule, SubscriptionsModule],
+  imports: [CqrsModule, AuthModule, forwardRef(() => ListingsModule), SubscriptionsModule],
   controllers: [
     AdminController,
     AdminModerationController,

apps/api/src/modules/analytics/analytics.module.ts

@@ -1,4 +1,4 @@
-import { Module } from '@nestjs/common';
+import { forwardRef, Module } from '@nestjs/common';
 import { CqrsModule } from '@nestjs/cqrs';
 import { AdminModule } from '@modules/admin';
 import { ListingsModule } from '@modules/listings';
@@ -17,6 +17,7 @@ import { GetMarketReportHandler } from './application/queries/get-market-report/
 import { GetMarketHistoryHandler } from './application/queries/get-market-history/get-market-history.handler';
 import { GetMarketSnapshotHandler } from './application/queries/get-market-snapshot/get-market-snapshot.handler';
 import { GetPriceMoversHandler } from './application/queries/get-price-movers/get-price-movers.handler';
+import { GetTrendingAreasHandler } from './application/queries/get-trending-areas/get-trending-areas.handler';
 import { GetProjectAiAdviceHandler } from './application/queries/get-project-ai-advice/get-project-ai-advice.handler';
 import { GetNearbyPOIsHandler } from './application/queries/get-nearby-pois/get-nearby-pois.handler';
 import { GetNeighborhoodScoreHandler } from './application/queries/get-neighborhood-score/get-neighborhood-score.handler';
@@ -69,6 +70,7 @@ const QueryHandlers = [
   GetProjectAiAdviceHandler,
   GetMarketSnapshotHandler,
   GetPriceMoversHandler,
+  GetTrendingAreasHandler,
 ];
 
 const EventHandlers = [
@@ -76,7 +78,7 @@ const EventHandlers = [
 ];
 
 @Module({
-  imports: [CqrsModule, ListingsModule, AdminModule, ProjectsModule],
+  imports: [CqrsModule, forwardRef(() => ListingsModule), forwardRef(() => AdminModule), ProjectsModule],
   controllers: [AnalyticsController, AvmController],
   providers: [
     // AI service client

apps/api/src/modules/analytics/application/__tests__/get-trending-areas.handler.spec.ts

@@ -0,0 +1,119 @@
+import { type CacheService, type LoggerService } from '@modules/shared';
+import { GetTrendingAreasHandler } from '../queries/get-trending-areas/get-trending-areas.handler';
+import { GetTrendingAreasQuery } from '../queries/get-trending-areas/get-trending-areas.query';
+
+describe('GetTrendingAreasHandler', () => {
+  let handler: GetTrendingAreasHandler;
+  let mockPrisma: { $queryRaw: ReturnType<typeof vi.fn>; marketIndex: { findMany: ReturnType<typeof vi.fn> } };
+  let mockCache: Partial<CacheService>;
+  let mockLogger: Partial<LoggerService>;
+
+  beforeEach(() => {
+    mockPrisma = {
+      $queryRaw: vi.fn(),
+      marketIndex: {
+        findMany: vi.fn(),
+      },
+    };
+    // Bypass @Cacheable decorator by making CacheService.getOrSet call the loader directly
+    mockCache = {
+      getOrSet: vi.fn((_key: string, loader: () => Promise<unknown>) => loader()),
+    } as unknown as Partial<CacheService>;
+    mockLogger = { error: vi.fn(), warn: vi.fn(), log: vi.fn() } as unknown as Partial<LoggerService>;
+
+    handler = new GetTrendingAreasHandler(
+      mockPrisma as any,
+      mockCache as CacheService,
+      mockLogger as LoggerService,
+    );
+  });
+
+  it('returns top trending districts sorted by score', async () => {
+    mockPrisma.$queryRaw.mockResolvedValue([
+      { district: 'Quận 1', new_listings: BigInt(10), inquiries: BigInt(50), views: BigInt(200) },
+      { district: 'Quận 7', new_listings: BigInt(20), inquiries: BigInt(30), views: BigInt(400) },
+      { district: 'Bình Thạnh', new_listings: BigInt(5), inquiries: BigInt(5), views: BigInt(50) },
+    ]);
+    mockPrisma.marketIndex.findMany.mockResolvedValue([
+      { district: 'Quận 1', yoyChange: 0.12 },
+      { district: 'Quận 7', yoyChange: 0.05 },
+    ]);
+
+    const query = new GetTrendingAreasQuery(7, 10, 'district');
+    const result = await handler.execute(query);
+
+    expect(result.period).toBe(7);
+    expect(result.level).toBe('district');
+    expect(result.areas.length).toBe(3);
+
+    // Quận 1 score = 50*0.6 + 200*0.3 + 10*0.1 = 30 + 60 + 1 = 91
+    // Quận 7 score = 30*0.6 + 400*0.3 + 20*0.1 = 18 + 120 + 2 = 140
+    // Bình Thạnh score = 5*0.6 + 50*0.3 + 5*0.1 = 3 + 15 + 0.5 = 18.5
+    // Expected order: Quận 7 (1st), Quận 1 (2nd), Bình Thạnh (3rd)
+    expect(result.areas[0].districtId).toBe('Quận 7');
+    expect(result.areas[0].scoreRank).toBe(1);
+    expect(result.areas[1].districtId).toBe('Quận 1');
+    expect(result.areas[2].districtId).toBe('Bình Thạnh');
+  });
+
+  it('respects the limit parameter', async () => {
+    mockPrisma.$queryRaw.mockResolvedValue([
+      { district: 'A', new_listings: BigInt(1), inquiries: BigInt(10), views: BigInt(100) },
+      { district: 'B', new_listings: BigInt(1), inquiries: BigInt(8), views: BigInt(80) },
+      { district: 'C', new_listings: BigInt(1), inquiries: BigInt(6), views: BigInt(60) },
+    ]);
+    mockPrisma.marketIndex.findMany.mockResolvedValue([]);
+
+    const query = new GetTrendingAreasQuery(7, 2, 'district');
+    const result = await handler.execute(query);
+
+    expect(result.areas.length).toBe(2);
+    expect(result.limit).toBe(2);
+  });
+
+  it('returns empty areas when no active listings in window', async () => {
+    mockPrisma.$queryRaw.mockResolvedValue([]);
+    mockPrisma.marketIndex.findMany.mockResolvedValue([]);
+
+    const query = new GetTrendingAreasQuery(7, 10, 'district');
+    const result = await handler.execute(query);
+
+    expect(result.areas).toEqual([]);
+    expect(mockPrisma.marketIndex.findMany).not.toHaveBeenCalled();
+  });
+
+  it('attaches yoyChange from market index as priceChangePct', async () => {
+    mockPrisma.$queryRaw.mockResolvedValue([
+      { district: 'Quận 1', new_listings: BigInt(5), inquiries: BigInt(20), views: BigInt(100) },
+    ]);
+    mockPrisma.marketIndex.findMany.mockResolvedValue([
+      { district: 'Quận 1', yoyChange: 0.08 },
+    ]);
+
+    const query = new GetTrendingAreasQuery(14, 10, 'district');
+    const result = await handler.execute(query);
+
+    expect(result.areas[0].priceChangePct).toBe(0.08);
+  });
+
+  it('sets priceChangePct to null when market index data is missing', async () => {
+    mockPrisma.$queryRaw.mockResolvedValue([
+      { district: 'Huyện Củ Chi', new_listings: BigInt(3), inquiries: BigInt(5), views: BigInt(40) },
+    ]);
+    mockPrisma.marketIndex.findMany.mockResolvedValue([]);
+
+    const query = new GetTrendingAreasQuery(7, 10, 'district');
+    const result = await handler.execute(query);
+
+    expect(result.areas[0].priceChangePct).toBeNull();
+  });
+
+  it('throws InternalServerErrorException on unexpected errors', async () => {
+    mockPrisma.$queryRaw.mockRejectedValue(new Error('DB connection lost'));
+
+    const query = new GetTrendingAreasQuery(7, 10, 'district');
+    await expect(handler.execute(query)).rejects.toThrow(
+      'Không thể truy vấn khu vực xu hướng. Vui lòng thử lại sau.',
+    );
+  });
+});

apps/api/src/modules/analytics/application/event-handlers/listing-created-moderation.handler.ts

@@ -1,6 +1,7 @@
 import { Inject } from '@nestjs/common';
 import { EventsHandler, type IEventHandler, CommandBus } from '@nestjs/cqrs';
-import { ListingCreatedEvent, ModerateListingCommand } from '@modules/listings';
+import { ListingCreatedEvent } from '@modules/listings/domain/events/listing-created.event';
+import { ModerateListingCommand } from '@modules/listings/application/commands/moderate-listing/moderate-listing.command';
 import { PrismaService, LoggerService } from '@modules/shared';
 import {
   AI_SERVICE_CLIENT,

apps/api/src/modules/analytics/application/queries/get-listing-ai-advice/get-listing-ai-advice.handler.ts

@@ -1,11 +1,11 @@
 import { HttpStatus, Inject } from '@nestjs/common';
 import { QueryBus, QueryHandler, type IQueryHandler } from '@nestjs/cqrs';
 import { DomainException, ErrorCode, LoggerService } from '@modules/shared';
-import { SystemSettingsService } from '@modules/admin';
+import { SystemSettingsService } from '@modules/admin/application/services/system-settings.service';
 import {
   LISTING_REPOSITORY,
   type IListingRepository,
-} from '@modules/listings';
+} from '@modules/listings/domain/repositories/listing.repository';
 import { type ListingDetailData } from '../../../../listings/domain/repositories/listing-read.dto';
 import {
   type NearbyPOIDto,

apps/api/src/modules/analytics/application/queries/get-price-movers/get-price-movers.handler.ts

@@ -64,26 +64,26 @@ export class GetPriceMoversHandler implements IQueryHandler<GetPriceMoversQuery>
         WITH current_window AS (
           SELECT
             p.district,
-            AVG(l.price) AS avg_price,
+            AVG(l."priceVND") AS avg_price,
             COUNT(l.id) AS sample_size
           FROM "Listing" l
           INNER JOIN "Property" p ON p.id = l."propertyId"
           WHERE l."createdAt" >= ${currentStart}
             AND l.status = 'ACTIVE'
-            AND l.price > 0
+            AND l."priceVND" > 0
           GROUP BY p.district
           HAVING COUNT(l.id) >= 10
         ),
         previous_window AS (
           SELECT
             p.district,
-            AVG(l.price) AS avg_price
+            AVG(l."priceVND") AS avg_price
           FROM "Listing" l
           INNER JOIN "Property" p ON p.id = l."propertyId"
           WHERE l."createdAt" >= ${previousStart}
             AND l."createdAt" < ${currentStart}
             AND l.status = 'ACTIVE'
-            AND l.price > 0
+            AND l."priceVND" > 0
           GROUP BY p.district
         )
         SELECT

apps/api/src/modules/analytics/application/queries/get-project-ai-advice/get-project-ai-advice.handler.ts

@@ -1,7 +1,7 @@
 import { HttpStatus, Inject } from '@nestjs/common';
 import { QueryBus, QueryHandler, type IQueryHandler } from '@nestjs/cqrs';
 import { DomainException, ErrorCode, LoggerService } from '@modules/shared';
-import { SystemSettingsService } from '@modules/admin';
+import { SystemSettingsService } from '@modules/admin/application/services/system-settings.service';
 import {
   PROJECT_REPOSITORY,
   type IProjectRepository,

apps/api/src/modules/analytics/application/queries/get-trending-areas/get-trending-areas.handler.ts

@@ -0,0 +1,125 @@
+import { Inject, InternalServerErrorException } from '@nestjs/common';
+import { QueryHandler, type IQueryHandler } from '@nestjs/cqrs';
+import { DomainException, CacheService, CachePrefix, CacheTTL, Cacheable, LoggerService, PrismaService } from '@modules/shared';
+import { GetTrendingAreasQuery } from './get-trending-areas.query';
+
+export interface TrendingAreaItem {
+  districtId: string;
+  name: string;
+  listings: number;
+  inquiries: number;
+  views: number;
+  priceChangePct: number | null;
+  scoreRank: number;
+}
+
+export interface TrendingAreasDto {
+  period: number;
+  level: string;
+  limit: number;
+  areas: TrendingAreaItem[];
+}
+
+interface RawDistrictRow {
+  district: string;
+  new_listings: bigint;
+  inquiries: bigint;
+  views: bigint;
+}
+
+@QueryHandler(GetTrendingAreasQuery)
+export class GetTrendingAreasHandler implements IQueryHandler<GetTrendingAreasQuery> {
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly cacheService: CacheService,
+    private readonly logger: LoggerService,
+  ) {}
+
+  @Cacheable({
+    prefix: CachePrefix.TRENDING_AREAS,
+    ttl: CacheTTL.TRENDING_AREAS,
+    resource: 'trending_areas',
+    keyFrom: (query: unknown) => {
+      const q = query as GetTrendingAreasQuery;
+      return [String(q.period), String(q.limit), q.level];
+    },
+  })
+  async execute(query: GetTrendingAreasQuery): Promise<TrendingAreasDto> {
+    const { period, limit, level } = query;
+
+    try {
+      const since = new Date(Date.now() - period * 24 * 60 * 60 * 1000);
+
+      // Aggregate new listings, inquiries, and views per district within the time window.
+      // Listing.viewCount is a running total so we use it as a proxy for views.
+      // Inquiry has createdAt that we can filter on.
+      // New listings = listings created within the window.
+      const rows = await this.prisma.$queryRaw<RawDistrictRow[]>`
+        SELECT
+          p.district,
+          COUNT(DISTINCT l.id)  AS new_listings,
+          COUNT(DISTINCT i.id)  AS inquiries,
+          COALESCE(SUM(l."viewCount"), 0) AS views
+        FROM "Listing" l
+        INNER JOIN "Property" p ON p.id = l."propertyId"
+        LEFT JOIN "Inquiry" i ON i."listingId" = l.id AND i."createdAt" >= ${since}
+        WHERE l."createdAt" >= ${since}
+          AND l.status = 'ACTIVE'
+        GROUP BY p.district
+      `;
+
+      // Compute score for each district
+      const scored = rows.map((r) => {
+        const listings = Number(r.new_listings);
+        const inquiries = Number(r.inquiries);
+        const views = Number(r.views);
+        const score = inquiries * 0.6 + views * 0.3 + listings * 0.1;
+        return { district: r.district, listings, inquiries, views, score };
+      });
+
+      // Sort descending by score, take top `limit`
+      scored.sort((a, b) => b.score - a.score);
+      const top = scored.slice(0, limit);
+
+      // Fetch price change (yoyChange) from MarketIndex for these districts
+      const districts = top.map((r) => r.district);
+      const marketIndexes = districts.length > 0
+        ? await this.prisma.marketIndex.findMany({
+            where: { district: { in: districts } },
+            orderBy: { createdAt: 'desc' },
+            select: { district: true, yoyChange: true },
+          })
+        : [];
+
+      // Build a map district → most recent yoyChange
+      const priceMap = new Map<string, number | null>();
+      for (const mi of marketIndexes) {
+        if (!priceMap.has(mi.district)) {
+          priceMap.set(mi.district, mi.yoyChange);
+        }
+      }
+
+      const areas: TrendingAreaItem[] = top.map((r, idx) => ({
+        districtId: r.district,
+        name: r.district,
+        listings: r.listings,
+        inquiries: r.inquiries,
+        views: r.views,
+        priceChangePct: priceMap.get(r.district) ?? null,
+        scoreRank: idx + 1,
+      }));
+
+      return { period, level, limit, areas };
+    } catch (error) {
+      if (error instanceof DomainException) throw error;
+      this.logger.error(
+        `Failed to truy vấn trending areas: ${error instanceof Error ? error.message : error}`,
+        error instanceof Error ? error.stack : undefined,
+        this.constructor.name,
+      );
+      throw new InternalServerErrorException(
+        'Không thể truy vấn khu vực xu hướng. Vui lòng thử lại sau.',
+      );
+    }
+  }
+}

apps/api/src/modules/analytics/application/queries/get-trending-areas/get-trending-areas.query.ts

@@ -0,0 +1,10 @@
+export class GetTrendingAreasQuery {
+  constructor(
+    /** Number of days to look back, e.g. 7 | 14 | 30 */
+    public readonly period: number,
+    /** Maximum number of results to return */
+    public readonly limit: number,
+    /** Geographic level of aggregation — currently only 'district' is supported */
+    public readonly level: 'district',
+  ) {}
+}

apps/api/src/modules/analytics/presentation/controllers/analytics.controller.ts

@@ -38,6 +38,8 @@ import { type MarketSnapshotDto } from '../../application/queries/get-market-sna
 import { GetMarketSnapshotQuery } from '../../application/queries/get-market-snapshot/get-market-snapshot.query';
 import { type PriceMoversDto } from '../../application/queries/get-price-movers/get-price-movers.handler';
 import { GetPriceMoversQuery } from '../../application/queries/get-price-movers/get-price-movers.query';
+import { type TrendingAreasDto } from '../../application/queries/get-trending-areas/get-trending-areas.handler';
+import { GetTrendingAreasQuery } from '../../application/queries/get-trending-areas/get-trending-areas.query';
 import { type NearbyPOIsResultDto } from '../../application/queries/get-nearby-pois/get-nearby-pois.handler';
 import { GetNearbyPOIsQuery } from '../../application/queries/get-nearby-pois/get-nearby-pois.query';
 import { GetNeighborhoodScoreQuery } from '../../application/queries/get-neighborhood-score/get-neighborhood-score.query';
@@ -60,6 +62,7 @@ import { GetMarketReportDto } from '../dto/get-market-report.dto';
 import { GetMarketHistoryDto } from '../dto/get-market-history.dto';
 import { GetMarketSnapshotDto } from '../dto/get-market-snapshot.dto';
 import { GetPriceMoversDto } from '../dto/get-price-movers.dto';
+import { GetTrendingAreasDto } from '../dto/get-trending-areas.dto';
 import { GetNearbyPOIsDto } from '../dto/get-nearby-pois.dto';
 import { GetPriceTrendDto } from '../dto/get-price-trend.dto';
 import { GetValuationDto } from '../dto/get-valuation.dto';
@@ -356,6 +359,19 @@ export class AnalyticsController {
     );
   }
 
+  @ApiOperation({
+    summary: 'Top khu vực đang trending (public)',
+    description:
+      'Trả về danh sách quận trending theo lượng tin đăng/inquiries/views trong khoảng nhìn lại. Public endpoint cho homepage. Cache.',
+  })
+  @ApiResponse({ status: 200, description: 'Trending areas retrieved' })
+  @Get('trending-areas')
+  async getTrendingAreas(@Query() dto: GetTrendingAreasDto): Promise<TrendingAreasDto> {
+    return this.queryBus.execute(
+      new GetTrendingAreasQuery(dto.period, dto.limit, dto.level),
+    );
+  }
+
   @ApiBearerAuth('JWT')
   @UseGuards(JwtAuthGuard)
   @Post('listings/:id/ai-advice')

apps/api/src/modules/analytics/presentation/dto/get-trending-areas.dto.ts

@@ -0,0 +1,41 @@
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+import { Type } from 'class-transformer';
+import { IsIn, IsInt, IsOptional, Max, Min } from 'class-validator';
+
+export class GetTrendingAreasDto {
+  @ApiPropertyOptional({
+    description: 'Look-back window in days',
+    enum: [7, 14, 30],
+    default: 7,
+    example: 7,
+  })
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @IsIn([7, 14, 30])
+  period: number = 7;
+
+  @ApiPropertyOptional({
+    description: 'Maximum number of trending areas to return',
+    minimum: 1,
+    maximum: 50,
+    default: 10,
+    example: 10,
+  })
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(1)
+  @Max(50)
+  limit: number = 10;
+
+  @ApiProperty({
+    description: 'Geographic aggregation level (currently only "district" is supported)',
+    enum: ['district'],
+    default: 'district',
+    example: 'district',
+  })
+  @IsOptional()
+  @IsIn(['district'])
+  level: 'district' = 'district';
+}

apps/api/src/modules/listings/listings.module.ts

@@ -1,4 +1,4 @@
-import { Module } from '@nestjs/common';
+import { forwardRef, Module } from '@nestjs/common';
 import { CqrsModule } from '@nestjs/cqrs';
 import { MulterModule } from '@nestjs/platform-express';
 import { AnalyticsModule } from '@modules/analytics';
@@ -64,7 +64,7 @@ const EventHandlers = [
 @Module({
   imports: [
     CqrsModule,
-    AnalyticsModule,
+    forwardRef(() => AnalyticsModule),
     MulterModule.register({
       limits: { fileSize: 100 * 1024 * 1024 }, // 100 MB — per-type limits enforced by FileValidationPipe
     }),

apps/api/src/modules/notifications/presentation/controllers/notifications.controller.ts

@@ -87,7 +87,7 @@ export class NotificationsController {
   @ApiResponse({ status: 200, description: 'Unread count retrieved' })
   @ApiResponse({ status: 401, description: 'Unauthorized' })
   async getUnreadCount(@CurrentUser() user: JwtPayload) {
-    const count = await this.notificationRepo.countUnreadByUserId(user.sub);
+    const count = await this.notificationsGateway.getUnreadCount(user.sub);
     return { unreadCount: count };
   }
 

apps/api/src/modules/notifications/presentation/gateways/notifications.gateway.ts

@@ -269,8 +269,11 @@ export class NotificationsGateway
   /**
    * Read the unread count from Redis (cache-aside pattern).
    * Falls back to the database when Redis is unavailable or cache misses.
+   *
+   * Public so REST callers (e.g. `GET /notifications/unread-count`) can
+   * share the same cached counter as the WebSocket fan-out.
    */
-  private async getUnreadCount(userId: string): Promise<number> {
+  async getUnreadCount(userId: string): Promise<number> {
     if (this.redisService.isAvailable()) {
       try {
         const cached = await this.redisService.get(UNREAD_COUNT_KEY(userId));

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 */

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}`,
+      ),
+    );
   },
 };

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,
   });
 }

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'",

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",