feat(web): add price range filter and list view to /du-an page

Add minPrice/maxPrice inputs to ProjectFilterBar and introduce a
list view mode alongside the existing grid/map toggle for project
browsing.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

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

@@ -25,6 +25,7 @@ import { MarketIndexCronService } from './infrastructure/services/market-index-c
 import { NeighborhoodScoreServiceImpl } from './infrastructure/services/neighborhood-score.service';
 import { PrismaAVMService } from './infrastructure/services/prisma-avm.service';
 import { AnalyticsController } from './presentation/controllers/analytics.controller';
+import { AvmController } from './presentation/controllers/avm.controller';
 
 const CommandHandlers = [
   TrackEventHandler,
@@ -50,7 +51,7 @@ const EventHandlers = [
 
 @Module({
   imports: [CqrsModule],
-  controllers: [AnalyticsController],
+  controllers: [AnalyticsController, AvmController],
   providers: [
     // AI service client
     { provide: AI_SERVICE_CLIENT, useClass: AiServiceClient },

apps/api/src/modules/analytics/presentation/__tests__/avm.controller.spec.ts

@@ -0,0 +1,95 @@
+import { type QueryBus } from '@nestjs/cqrs';
+import { BatchValuationQuery } from '../../application/queries/batch-valuation/batch-valuation.query';
+import { ValuationComparisonQuery } from '../../application/queries/valuation-comparison/valuation-comparison.query';
+import { ValuationHistoryQuery } from '../../application/queries/valuation-history/valuation-history.query';
+import { AvmController } from '../controllers/avm.controller';
+
+describe('AvmController', () => {
+  let controller: AvmController;
+  let mockQueryBus: { execute: ReturnType<typeof vi.fn> };
+
+  beforeEach(() => {
+    mockQueryBus = { execute: vi.fn() };
+    controller = new AvmController(mockQueryBus as unknown as QueryBus);
+  });
+
+  describe('POST /avm/batch', () => {
+    it('dispatches BatchValuationQuery with property IDs', async () => {
+      const expected = {
+        results: [
+          { propertyId: 'prop-1', valuation: { estimatedPrice: '5000000000' } },
+          { propertyId: 'prop-2', valuation: { estimatedPrice: '6000000000' } },
+        ],
+      };
+      mockQueryBus.execute.mockResolvedValue(expected);
+
+      const result = await controller.batchValuation({
+        propertyIds: ['prop-1', 'prop-2'],
+      } as any);
+
+      expect(mockQueryBus.execute).toHaveBeenCalledWith(
+        new BatchValuationQuery(['prop-1', 'prop-2']),
+      );
+      expect(result).toBe(expected);
+    });
+  });
+
+  describe('GET /avm/history/:propertyId', () => {
+    it('dispatches ValuationHistoryQuery with propertyId and limit', async () => {
+      const expected = { propertyId: 'prop-1', history: [], totalRecords: 0 };
+      mockQueryBus.execute.mockResolvedValue(expected);
+
+      const result = await controller.getHistory('prop-1', { limit: 25 } as any);
+
+      expect(mockQueryBus.execute).toHaveBeenCalledWith(
+        new ValuationHistoryQuery('prop-1', 25),
+      );
+      expect(result).toBe(expected);
+    });
+
+    it('defaults limit to 50 when not provided', async () => {
+      const expected = { propertyId: 'prop-1', history: [], totalRecords: 0 };
+      mockQueryBus.execute.mockResolvedValue(expected);
+
+      const result = await controller.getHistory('prop-1', {} as any);
+
+      expect(mockQueryBus.execute).toHaveBeenCalledWith(
+        new ValuationHistoryQuery('prop-1', 50),
+      );
+      expect(result).toBe(expected);
+    });
+  });
+
+  describe('GET /avm/compare', () => {
+    it('dispatches ValuationComparisonQuery with parsed IDs', async () => {
+      const expected = {
+        properties: [],
+        summary: { highestValue: null, lowestValue: null, averagePricePerM2: 0, averageConfidence: 0 },
+      };
+      mockQueryBus.execute.mockResolvedValue(expected);
+
+      const result = await controller.compare({
+        ids: ['prop-1', 'prop-2', 'prop-3'],
+      } as any);
+
+      expect(mockQueryBus.execute).toHaveBeenCalledWith(
+        new ValuationComparisonQuery(['prop-1', 'prop-2', 'prop-3']),
+      );
+      expect(result).toBe(expected);
+    });
+
+    it('handles two property IDs (minimum)', async () => {
+      const expected = { properties: [], summary: {} };
+      mockQueryBus.execute.mockResolvedValue(expected);
+
+      const result = await controller.compare({
+        ids: ['prop-1', 'prop-2'],
+      } as any);
+
+      expect(mockQueryBus.execute).toHaveBeenCalledWith(
+        new ValuationComparisonQuery(['prop-1', 'prop-2']),
+      );
+      expect(result).toBe(expected);
+    });
+  });
+});

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

@@ -0,0 +1,86 @@
+import {
+  Body,
+  Controller,
+  Get,
+  Param,
+  Post,
+  Query,
+  UseGuards,
+} from '@nestjs/common';
+import { type QueryBus } from '@nestjs/cqrs';
+import { ApiTags, ApiOperation, ApiResponse, ApiBearerAuth, ApiParam, ApiQuery } from '@nestjs/swagger';
+import { JwtAuthGuard } from '@modules/auth';
+import { EndpointRateLimit, EndpointRateLimitGuard } from '@modules/shared';
+import { RequireQuota, QuotaGuard } from '@modules/subscriptions';
+import { type BatchValuationDto as BatchValuationResultDto } from '../../application/queries/batch-valuation/batch-valuation.handler';
+import { BatchValuationQuery } from '../../application/queries/batch-valuation/batch-valuation.query';
+import { type ValuationComparisonDto as ValuationComparisonResultDto } from '../../application/queries/valuation-comparison/valuation-comparison.handler';
+import { ValuationComparisonQuery } from '../../application/queries/valuation-comparison/valuation-comparison.query';
+import { type ValuationHistoryDto as ValuationHistoryResultDto } from '../../application/queries/valuation-history/valuation-history.handler';
+import { ValuationHistoryQuery } from '../../application/queries/valuation-history/valuation-history.query';
+import { type AvmCompareQueryDto } from '../dto/avm-compare-query.dto';
+import { type BatchValuationDto } from '../dto/batch-valuation.dto';
+import { type ValuationHistoryDto } from '../dto/valuation-history.dto';
+
+@ApiTags('avm')
+@Controller('avm')
+export class AvmController {
+  constructor(
+    private readonly queryBus: QueryBus,
+  ) {}
+
+  @ApiBearerAuth('JWT')
+  @EndpointRateLimit({ limit: 10, windowSeconds: 60, keyStrategy: 'user' })
+  @UseGuards(EndpointRateLimitGuard, JwtAuthGuard, QuotaGuard)
+  @RequireQuota('analytics_queries')
+  @Post('batch')
+  @ApiOperation({ summary: 'Batch valuation for multiple properties (max 50)' })
+  @ApiResponse({ status: 200, description: 'Batch valuation results' })
+  @ApiResponse({ status: 400, description: 'Invalid parameters' })
+  @ApiResponse({ status: 403, description: 'Quota exceeded' })
+  @ApiResponse({ status: 429, description: 'Rate limit exceeded — max 10 requests per 60s' })
+  async batchValuation(@Body() dto: BatchValuationDto): Promise<BatchValuationResultDto> {
+    return this.queryBus.execute(
+      new BatchValuationQuery(dto.propertyIds),
+    );
+  }
+
+  @ApiBearerAuth('JWT')
+  @UseGuards(JwtAuthGuard, QuotaGuard)
+  @RequireQuota('analytics_queries')
+  @Get('history/:propertyId')
+  @ApiOperation({ summary: 'Get valuation history for a property (time-series)' })
+  @ApiParam({ name: 'propertyId', description: 'Property ID', example: 'prop-123' })
+  @ApiResponse({ status: 200, description: 'Valuation history time-series data' })
+  @ApiResponse({ status: 403, description: 'Quota exceeded' })
+  async getHistory(
+    @Param('propertyId') propertyId: string,
+    @Query() dto: ValuationHistoryDto,
+  ): Promise<ValuationHistoryResultDto> {
+    return this.queryBus.execute(
+      new ValuationHistoryQuery(propertyId, dto.limit ?? 50),
+    );
+  }
+
+  @ApiBearerAuth('JWT')
+  @EndpointRateLimit({ limit: 10, windowSeconds: 60, keyStrategy: 'user' })
+  @UseGuards(EndpointRateLimitGuard, JwtAuthGuard, QuotaGuard)
+  @RequireQuota('analytics_queries')
+  @Get('compare')
+  @ApiOperation({ summary: 'Compare valuations for 2-5 properties side by side' })
+  @ApiQuery({
+    name: 'ids',
+    description: 'Comma-separated property IDs (2-5)',
+    example: 'prop-1,prop-2,prop-3',
+    type: String,
+  })
+  @ApiResponse({ status: 200, description: 'Normalized comparison data for UI' })
+  @ApiResponse({ status: 400, description: 'Invalid parameters — provide 2-5 property IDs' })
+  @ApiResponse({ status: 403, description: 'Quota exceeded' })
+  @ApiResponse({ status: 429, description: 'Rate limit exceeded — max 10 requests per 60s' })
+  async compare(@Query() dto: AvmCompareQueryDto): Promise<ValuationComparisonResultDto> {
+    return this.queryBus.execute(
+      new ValuationComparisonQuery(dto.ids),
+    );
+  }
+}

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

@@ -1 +1,2 @@
 export { AnalyticsController } from './analytics.controller';
+export { AvmController } from './avm.controller';

apps/api/src/modules/analytics/presentation/dto/avm-compare-query.dto.ts

@@ -0,0 +1,19 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { Transform } from 'class-transformer';
+import { ArrayMaxSize, ArrayMinSize, IsArray, IsString } from 'class-validator';
+
+export class AvmCompareQueryDto {
+  @ApiProperty({
+    description: 'Comma-separated property IDs to compare (2-5)',
+    example: 'prop-1,prop-2,prop-3',
+    type: String,
+  })
+  @Transform(({ value }) =>
+    typeof value === 'string' ? value.split(',').map((s: string) => s.trim()).filter(Boolean) : value,
+  )
+  @IsArray()
+  @ArrayMinSize(2)
+  @ArrayMaxSize(5)
+  @IsString({ each: true })
+  ids!: string[];
+}

apps/api/src/modules/analytics/presentation/dto/index.ts

@@ -6,3 +6,4 @@ export { GetValuationDto } from './get-valuation.dto';
 export { BatchValuationDto } from './batch-valuation.dto';
 export { ValuationHistoryDto } from './valuation-history.dto';
 export { ValuationComparisonDto } from './valuation-comparison.dto';
+export { AvmCompareQueryDto } from './avm-compare-query.dto';

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

@@ -1,12 +1,23 @@
 'use client';
 
-import { Building2, LayoutGrid, Map } from 'lucide-react';
+import { Building2, LayoutGrid, List, Map, MapPin } from 'lucide-react';
 import dynamic from 'next/dynamic';
+import Image from 'next/image';
 import * as React from 'react';
 import { ProjectCard } from '@/components/du-an/project-card';
 import { ProjectFilterBar } from '@/components/du-an/project-filter-bar';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import type { SearchProjectsParams } from '@/lib/du-an-api';
+import { Card } from '@/components/ui/card';
+import { Link } from '@/i18n/navigation';
+import { formatPrice } from '@/lib/currency';
+import {
+  PROJECT_PROPERTY_TYPE_LABELS,
+  PROJECT_STATUS_COLORS,
+  PROJECT_STATUS_LABELS,
+  type ProjectSummary,
+  type SearchProjectsParams,
+} from '@/lib/du-an-api';
 import { useProjectsSearch } from '@/lib/hooks/use-du-an';
 import { cn } from '@/lib/utils';
 
@@ -17,7 +28,7 @@ const ProjectMap = dynamic(
 
 const PAGE_SIZE = 12;
 
-type ViewMode = 'grid' | 'map';
+type ViewMode = 'grid' | 'list' | 'map';
 
 export default function DuAnPage() {
   const [filters, setFilters] = React.useState<SearchProjectsParams>({
@@ -62,6 +73,19 @@ export default function DuAnPage() {
           >
             <LayoutGrid className="h-4 w-4" />
           </button>
+          <button
+            type="button"
+            onClick={() => setViewMode('list')}
+            className={cn(
+              'rounded-md p-2 transition-colors',
+              viewMode === 'list'
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:text-foreground',
+            )}
+            aria-label="Xem dạng danh sách"
+          >
+            <List className="h-4 w-4" />
+          </button>
           <button
             type="button"
             onClick={() => setViewMode('map')}
@@ -113,6 +137,12 @@ export default function DuAnPage() {
 
             {viewMode === 'map' ? (
               <ProjectMap projects={data.data} />
+            ) : viewMode === 'list' ? (
+              <div className="space-y-4">
+                {data.data.map((project) => (
+                  <ProjectListItem key={project.id} project={project} />
+                ))}
+              </div>
             ) : (
               <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                 {data.data.map((project) => (
@@ -121,8 +151,8 @@ export default function DuAnPage() {
               </div>
             )}
 
-            {/* Pagination (grid mode only) */}
+            {/* Pagination (grid/list mode) */}
-            {viewMode === 'grid' && data.totalPages > 1 && (
+            {viewMode !== 'map' && data.totalPages > 1 && (
               <div className="mt-8 flex items-center justify-center gap-2">
                 <Button
                   variant="outline"
@@ -159,3 +189,75 @@ export default function DuAnPage() {
     </div>
   );
 }
+
+function ProjectListItem({ project }: { project: ProjectSummary }) {
+  const statusLabel = PROJECT_STATUS_LABELS[project.status];
+  const statusColor = PROJECT_STATUS_COLORS[project.status];
+  const propertyLabels = project.propertyTypes
+    .map((t) => PROJECT_PROPERTY_TYPE_LABELS[t])
+    .join(', ');
+
+  return (
+    <Link href={`/du-an/${project.slug}`}>
+      <Card className="group flex overflow-hidden transition-shadow hover:shadow-lg">
+        {/* Thumbnail */}
+        <div className="relative aspect-[4/3] w-48 shrink-0 overflow-hidden bg-muted sm:w-56 md:w-64">
+          {project.thumbnailUrl ? (
+            <Image
+              src={project.thumbnailUrl}
+              alt={project.name}
+              fill
+              className="object-cover transition-transform group-hover:scale-105"
+              sizes="256px"
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center">
+              <Building2 className="h-10 w-10 text-muted-foreground/30" />
+            </div>
+          )}
+          <Badge
+            className={cn('absolute left-2 top-2 text-xs', statusColor)}
+            variant="secondary"
+          >
+            {statusLabel}
+          </Badge>
+        </div>
+
+        {/* Content */}
+        <div className="flex min-w-0 flex-1 flex-col justify-between p-4">
+          <div>
+            <h3 className="line-clamp-1 text-base font-semibold group-hover:text-primary">
+              {project.name}
+            </h3>
+            <div className="mt-1 flex items-center gap-1 text-sm text-muted-foreground">
+              <MapPin className="h-3.5 w-3.5 shrink-0" />
+              <span className="line-clamp-1">
+                {project.district}, {project.city}
+              </span>
+            </div>
+            <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+              <span>{propertyLabels}</span>
+              <span>·</span>
+              <span>{project.totalUnits} căn</span>
+              <span>·</span>
+              <span>{project.developer.name}</span>
+            </div>
+          </div>
+
+          <div className="mt-2">
+            {project.minPrice ? (
+              <p className="text-sm font-bold text-primary">
+                {formatPrice(project.minPrice)}
+                {project.maxPrice && project.maxPrice !== project.minPrice && (
+                  <span> – {formatPrice(project.maxPrice)}</span>
+                )}
+              </p>
+            ) : (
+              <p className="text-sm text-muted-foreground">Liên hệ</p>
+            )}
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}

apps/web/components/du-an/project-filter-bar.tsx

@@ -29,7 +29,7 @@ export function ProjectFilterBar({ filters, onFilterChange }: ProjectFilterBarPr
     updateFilter('q', search.trim());
   };
 
-  const hasFilters = filters.city || filters.district || filters.status || filters.propertyType || filters.q;
+  const hasFilters = filters.city || filters.district || filters.status || filters.propertyType || filters.minPrice || filters.maxPrice || filters.q;
 
   const clearAll = () => {
     setSearch('');
@@ -104,6 +104,34 @@ export function ProjectFilterBar({ filters, onFilterChange }: ProjectFilterBarPr
           aria-label="Quận/Huyện"
         />
 
+        <Input
+          type="number"
+          placeholder="Giá từ (tỷ)"
+          value={filters.minPrice ? String(Number(filters.minPrice) / 1_000_000_000) : ''}
+          onChange={(e) => {
+            const val = e.target.value;
+            updateFilter('minPrice', val ? String(Number(val) * 1_000_000_000) : '');
+          }}
+          className="w-28"
+          aria-label="Giá tối thiểu"
+          min={0}
+          step={0.1}
+        />
+
+        <Input
+          type="number"
+          placeholder="Giá đến (tỷ)"
+          value={filters.maxPrice ? String(Number(filters.maxPrice) / 1_000_000_000) : ''}
+          onChange={(e) => {
+            const val = e.target.value;
+            updateFilter('maxPrice', val ? String(Number(val) * 1_000_000_000) : '');
+          }}
+          className="w-28"
+          aria-label="Giá tối đa"
+          min={0}
+          step={0.1}
+        />
+
         <select
           value={filters.sort || ''}
           onChange={(e) => updateFilter('sort', e.target.value)}