feat: add MFA/TOTP auth, PII encryption, agents/leads/inquiries modules, and comprehensive tests

- Add TOTP-based MFA with setup, verify, disable, backup codes, and challenge flow
- Add PII field encryption middleware with AES-256-GCM and deterministic search hashes
- Add agents, inquiries, and leads domain modules with entities, events, value objects
- Add web dashboard pages for inquiries and leads with detail dialogs
- Add 30+ component tests (valuation, charts, listings, search, providers, UI)
- Add Prisma migrations for encryption hash columns and MFA TOTP support
- Fix all ESLint errors (unused imports, duplicate imports, lint auto-fixes)
- Update dependencies and lock file
- Clean up obsolete exploration/QA docs, add audit documentation

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

apps/web/components/charts/__tests__/agent-performance.spec.tsx

@@ -0,0 +1,85 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { AgentPerformance } from '../agent-performance';
+
+// Mock recharts
+vi.mock('recharts', () => ({
+  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="responsive-container">{children}</div>
+  ),
+  BarChart: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="bar-chart">{children}</div>
+  ),
+  Bar: ({ dataKey }: { dataKey: string }) => <div data-testid={`bar-${dataKey}`} />,
+  XAxis: () => <div data-testid="xaxis" />,
+  YAxis: () => <div data-testid="yaxis" />,
+  CartesianGrid: () => <div data-testid="grid" />,
+  Tooltip: () => <div data-testid="tooltip" />,
+  Legend: () => <div data-testid="legend" />,
+  PieChart: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="pie-chart">{children}</div>
+  ),
+  Pie: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="pie">{children}</div>
+  ),
+  Cell: () => <div data-testid="cell" />,
+}));
+
+describe('AgentPerformance', () => {
+  it('renders KPI cards', () => {
+    render(<AgentPerformance />);
+    expect(screen.getByText('Giao dịch thành công')).toBeInTheDocument();
+    expect(screen.getByText('Doanh thu')).toBeInTheDocument();
+    expect(screen.getByText('Thời gian phản hồi TB')).toBeInTheDocument();
+    expect(screen.getByText('Tỷ lệ chuyển đổi')).toBeInTheDocument();
+  });
+
+  it('renders KPI values', () => {
+    render(<AgentPerformance />);
+    // "8" appears in "Giao dịch thành công" and in funnel "Chốt deal 8"
+    expect(screen.getByText('13.0 tỷ')).toBeInTheDocument();
+    expect(screen.getByText('1.2 giờ')).toBeInTheDocument();
+    expect(screen.getByText('6.7%')).toBeInTheDocument();
+    // Check for deal count in KPI section
+    expect(screen.getByText('Giao dịch thành công')).toBeInTheDocument();
+  });
+
+  it('renders monthly deals chart card', () => {
+    render(<AgentPerformance />);
+    expect(screen.getByText('Giao dịch & Doanh thu theo tháng')).toBeInTheDocument();
+    expect(screen.getByText('6 tháng gần nhất')).toBeInTheDocument();
+  });
+
+  it('renders funnel chart card', () => {
+    render(<AgentPerformance />);
+    expect(screen.getByText('Phễu chuyển đổi khách hàng')).toBeInTheDocument();
+    expect(screen.getByText('Từ liên hệ đến chốt deal')).toBeInTheDocument();
+  });
+
+  it('renders funnel stages', () => {
+    render(<AgentPerformance />);
+    expect(screen.getByText('Liên hệ mới')).toBeInTheDocument();
+    expect(screen.getByText('Đang trao đổi')).toBeInTheDocument();
+    expect(screen.getByText('Xem nhà')).toBeInTheDocument();
+    expect(screen.getByText('Đàm phán')).toBeInTheDocument();
+    expect(screen.getByText('Chốt deal')).toBeInTheDocument();
+  });
+
+  it('renders funnel count values', () => {
+    render(<AgentPerformance />);
+    expect(screen.getByText('120')).toBeInTheDocument();
+    expect(screen.getByText('85')).toBeInTheDocument();
+    expect(screen.getByText('42')).toBeInTheDocument();
+  });
+
+  it('renders disclaimer about mock data', () => {
+    render(<AgentPerformance />);
+    expect(screen.getByText(/Dữ liệu mẫu/)).toBeInTheDocument();
+  });
+
+  it('renders sub-period info', () => {
+    render(<AgentPerformance />);
+    expect(screen.getByText('Quý hiện tại')).toBeInTheDocument();
+    expect(screen.getByText('+22% so với quý trước')).toBeInTheDocument();
+  });
+});

apps/web/components/charts/__tests__/district-bar-chart.spec.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { DistrictBarChart } from '../district-bar-chart';
+
+// Mock recharts
+vi.mock('recharts', () => ({
+  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="responsive-container">{children}</div>
+  ),
+  BarChart: ({ children, data }: { children: React.ReactNode; data: unknown[] }) => (
+    <div data-testid="bar-chart" data-count={data.length}>{children}</div>
+  ),
+  Bar: ({ dataKey }: { dataKey: string }) => <div data-testid={`bar-${dataKey}`} />,
+  XAxis: ({ dataKey }: { dataKey: string }) => <div data-testid={`xaxis-${dataKey}`} />,
+  YAxis: () => <div data-testid="yaxis" />,
+  CartesianGrid: () => <div data-testid="grid" />,
+  Tooltip: () => <div data-testid="tooltip" />,
+}));
+
+const sampleData = [
+  { district: 'Quận 1', price: 120, listings: 50 },
+  { district: 'Quận 2', price: 80, listings: 40 },
+  { district: 'Quận 7', price: 65, listings: 60 },
+];
+
+describe('DistrictBarChart', () => {
+  it('renders responsive container', () => {
+    render(<DistrictBarChart data={sampleData} />);
+    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
+  });
+
+  it('renders bar chart', () => {
+    render(<DistrictBarChart data={sampleData} />);
+    expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
+  });
+
+  it('renders bar with default dataKey "price"', () => {
+    render(<DistrictBarChart data={sampleData} />);
+    expect(screen.getByTestId('bar-price')).toBeInTheDocument();
+  });
+
+  it('renders bar with custom dataKey', () => {
+    render(<DistrictBarChart data={sampleData} dataKey="listings" />);
+    expect(screen.getByTestId('bar-listings')).toBeInTheDocument();
+  });
+
+  it('renders XAxis with district key', () => {
+    render(<DistrictBarChart data={sampleData} />);
+    expect(screen.getByTestId('xaxis-district')).toBeInTheDocument();
+  });
+
+  it('renders CartesianGrid', () => {
+    render(<DistrictBarChart data={sampleData} />);
+    expect(screen.getByTestId('grid')).toBeInTheDocument();
+  });
+
+  it('renders Tooltip', () => {
+    render(<DistrictBarChart data={sampleData} />);
+    expect(screen.getByTestId('tooltip')).toBeInTheDocument();
+  });
+
+  it('passes data to chart', () => {
+    render(<DistrictBarChart data={sampleData} />);
+    expect(screen.getByTestId('bar-chart')).toHaveAttribute('data-count', '3');
+  });
+});

apps/web/components/charts/__tests__/price-trend-chart.spec.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { PriceTrendChart } from '../price-trend-chart';
+
+// Mock recharts
+vi.mock('recharts', () => ({
+  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="responsive-container">{children}</div>
+  ),
+  LineChart: ({ children, data }: { children: React.ReactNode; data: unknown[] }) => (
+    <div data-testid="line-chart" data-count={data.length}>{children}</div>
+  ),
+  Line: ({ dataKey }: { dataKey: string }) => <div data-testid={`line-${dataKey}`} />,
+  XAxis: ({ dataKey }: { dataKey: string }) => <div data-testid={`xaxis-${dataKey}`} />,
+  YAxis: ({ yAxisId }: { yAxisId?: string }) => <div data-testid={`yaxis-${yAxisId || 'default'}`} />,
+  CartesianGrid: () => <div data-testid="grid" />,
+  Tooltip: () => <div data-testid="tooltip" />,
+  Legend: () => <div data-testid="legend" />,
+}));
+
+const sampleData = [
+  { period: 'T1/2026', 'Gia/m2': 65, 'Tin đăng': 120 },
+  { period: 'T2/2026', 'Gia/m2': 68, 'Tin đăng': 130 },
+  { period: 'T3/2026', 'Gia/m2': 70, 'Tin đăng': 125 },
+];
+
+describe('PriceTrendChart', () => {
+  it('renders responsive container', () => {
+    render(<PriceTrendChart data={sampleData} />);
+    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
+  });
+
+  it('renders line chart', () => {
+    render(<PriceTrendChart data={sampleData} />);
+    expect(screen.getByTestId('line-chart')).toBeInTheDocument();
+  });
+
+  it('renders price line', () => {
+    render(<PriceTrendChart data={sampleData} />);
+    expect(screen.getByTestId('line-Gia/m2')).toBeInTheDocument();
+  });
+
+  it('renders listings count line', () => {
+    render(<PriceTrendChart data={sampleData} />);
+    expect(screen.getByTestId('line-Tin đăng')).toBeInTheDocument();
+  });
+
+  it('renders XAxis with period key', () => {
+    render(<PriceTrendChart data={sampleData} />);
+    expect(screen.getByTestId('xaxis-period')).toBeInTheDocument();
+  });
+
+  it('renders dual Y axes', () => {
+    render(<PriceTrendChart data={sampleData} />);
+    expect(screen.getByTestId('yaxis-left')).toBeInTheDocument();
+    expect(screen.getByTestId('yaxis-right')).toBeInTheDocument();
+  });
+
+  it('renders Legend', () => {
+    render(<PriceTrendChart data={sampleData} />);
+    expect(screen.getByTestId('legend')).toBeInTheDocument();
+  });
+
+  it('passes data to chart', () => {
+    render(<PriceTrendChart data={sampleData} />);
+    expect(screen.getByTestId('line-chart')).toHaveAttribute('data-count', '3');
+  });
+});