feat(cache): implement Redis caching for search & analytics hot paths

- Add TTL-specific cache durations: district stats (5min), market report (15min), heatmap (5min)
- Add Redis caching to GeoSearch handler with 60s TTL
- Add cache invalidation on listing.approved, listing.updated, listing.deactivated, listing.sold events
- Invalidate search, geo_search, and all analytics cache prefixes on listing state changes
- Update tests for new CacheService dependency in event handler and geo-search handler

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

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

@@ -0,0 +1,145 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useAuthStore } from '@/lib/auth-store';
+
+// Mock next/navigation
+const mockPush = vi.fn();
+const mockSearchParams = new URLSearchParams();
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockPush }),
+  useSearchParams: () => mockSearchParams,
+}));
+
+// Mock next/link
+vi.mock('next/link', () => ({
+  default: ({ children, href, ...props }: { children: React.ReactNode; href: string; [key: string]: unknown }) => (
+    <a href={href} {...props}>{children}</a>
+  ),
+}));
+
+// Mock auth store
+vi.mock('@/lib/auth-store', () => {
+  const store = {
+    login: vi.fn(),
+    isLoading: false,
+    error: null,
+    clearError: vi.fn(),
+  };
+  return {
+    useAuthStore: vi.fn((selector) => {
+      if (typeof selector === 'function') return selector(store);
+      return store;
+    }),
+  };
+});
+
+import LoginPage from '../login/page';
+
+const mockedUseAuthStore = vi.mocked(useAuthStore);
+
+describe('LoginPage', () => {
+  let mockStore: {
+    login: ReturnType<typeof vi.fn>;
+    isLoading: boolean;
+    error: string | null;
+    clearError: ReturnType<typeof vi.fn>;
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockStore = {
+      login: vi.fn(),
+      isLoading: false,
+      error: null,
+      clearError: vi.fn(),
+    };
+    mockedUseAuthStore.mockImplementation((selector) => {
+      if (typeof selector === 'function') return (selector as (s: typeof mockStore) => unknown)(mockStore);
+      return mockStore as ReturnType<typeof useAuthStore>;
+    });
+  });
+
+  it('renders login form with phone and password fields', () => {
+    render(<LoginPage />);
+
+    expect(screen.getByRole('heading', { name: 'Đăng nhập' })).toBeInTheDocument();
+    expect(screen.getByLabelText('Số điện thoại')).toBeInTheDocument();
+    expect(screen.getByLabelText('Mật khẩu')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /đăng nhập/i })).toBeInTheDocument();
+  });
+
+  it('renders OAuth buttons', () => {
+    render(<LoginPage />);
+
+    expect(screen.getByRole('button', { name: /google/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /zalo/i })).toBeInTheDocument();
+  });
+
+  it('renders register link', () => {
+    render(<LoginPage />);
+
+    const registerLink = screen.getByRole('link', { name: /đăng ký/i });
+    expect(registerLink).toHaveAttribute('href', '/register');
+  });
+
+  it('submits form with valid data', async () => {
+    mockStore.login.mockResolvedValue(undefined);
+    render(<LoginPage />);
+
+    await userEvent.type(screen.getByLabelText('Số điện thoại'), '0912345678');
+    await userEvent.type(screen.getByLabelText('Mật khẩu'), 'password123');
+    await userEvent.click(screen.getByRole('button', { name: /đăng nhập/i }));
+
+    await waitFor(() => {
+      expect(mockStore.login).toHaveBeenCalledWith({
+        phone: '0912345678',
+        password: 'password123',
+      });
+    });
+  });
+
+  it('shows validation errors for empty fields', async () => {
+    render(<LoginPage />);
+
+    await userEvent.click(screen.getByRole('button', { name: /đăng nhập/i }));
+
+    await waitFor(() => {
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('toggles password visibility', async () => {
+    render(<LoginPage />);
+
+    const passwordInput = screen.getByLabelText('Mật khẩu');
+    expect(passwordInput).toHaveAttribute('type', 'password');
+
+    await userEvent.click(screen.getByText('Hiện'));
+    expect(passwordInput).toHaveAttribute('type', 'text');
+
+    await userEvent.click(screen.getByText('Ẩn'));
+    expect(passwordInput).toHaveAttribute('type', 'password');
+  });
+
+  it('displays store error message', () => {
+    mockStore.error = 'Sai mật khẩu';
+    render(<LoginPage />);
+
+    expect(screen.getByText('Sai mật khẩu')).toBeInTheDocument();
+  });
+
+  it('navigates to home after successful login', async () => {
+    mockStore.login.mockResolvedValue(undefined);
+    render(<LoginPage />);
+
+    await userEvent.type(screen.getByLabelText('Số điện thoại'), '0912345678');
+    await userEvent.type(screen.getByLabelText('Mật khẩu'), 'password123');
+    await userEvent.click(screen.getByRole('button', { name: /đăng nhập/i }));
+
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith('/');
+    });
+  });
+});

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

@@ -0,0 +1,145 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useAuthStore } from '@/lib/auth-store';
+
+const mockPush = vi.fn();
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockPush }),
+}));
+
+vi.mock('next/link', () => ({
+  default: ({ children, href, ...props }: { children: React.ReactNode; href: string; [key: string]: unknown }) => (
+    <a href={href} {...props}>{children}</a>
+  ),
+}));
+
+vi.mock('@/lib/auth-store', () => {
+  const store = {
+    register: vi.fn(),
+    isLoading: false,
+    error: null,
+    clearError: vi.fn(),
+  };
+  return {
+    useAuthStore: vi.fn((selector) => {
+      if (typeof selector === 'function') return selector(store);
+      return store;
+    }),
+  };
+});
+
+import RegisterPage from '../register/page';
+
+const mockedUseAuthStore = vi.mocked(useAuthStore);
+
+describe('RegisterPage', () => {
+  let mockStore: {
+    register: ReturnType<typeof vi.fn>;
+    isLoading: boolean;
+    error: string | null;
+    clearError: ReturnType<typeof vi.fn>;
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockStore = {
+      register: vi.fn(),
+      isLoading: false,
+      error: null,
+      clearError: vi.fn(),
+    };
+    mockedUseAuthStore.mockImplementation((selector) => {
+      if (typeof selector === 'function') return (selector as (s: typeof mockStore) => unknown)(mockStore);
+      return mockStore as ReturnType<typeof useAuthStore>;
+    });
+  });
+
+  it('renders register form with all fields', () => {
+    render(<RegisterPage />);
+
+    expect(screen.getByText('Tạo tài khoản')).toBeInTheDocument();
+    expect(screen.getByLabelText('Họ và tên')).toBeInTheDocument();
+    expect(screen.getByLabelText('Số điện thoại')).toBeInTheDocument();
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText('Mật khẩu')).toBeInTheDocument();
+    expect(screen.getByLabelText('Xác nhận mật khẩu')).toBeInTheDocument();
+  });
+
+  it('renders login link', () => {
+    render(<RegisterPage />);
+    const loginLink = screen.getByRole('link', { name: /đăng nhập/i });
+    expect(loginLink).toHaveAttribute('href', '/login');
+  });
+
+  it('submits form with valid data', async () => {
+    mockStore.register.mockResolvedValue(undefined);
+    render(<RegisterPage />);
+
+    await userEvent.type(screen.getByLabelText('Họ và tên'), 'Nguyen Van A');
+    await userEvent.type(screen.getByLabelText('Số điện thoại'), '0912345678');
+    await userEvent.type(screen.getByLabelText('Mật khẩu'), 'password123');
+    await userEvent.type(screen.getByLabelText('Xác nhận mật khẩu'), 'password123');
+    await userEvent.click(screen.getByRole('button', { name: /đăng ký/i }));
+
+    await waitFor(() => {
+      expect(mockStore.register).toHaveBeenCalledWith({
+        phone: '0912345678',
+        password: 'password123',
+        fullName: 'Nguyen Van A',
+        email: undefined,
+      });
+    });
+  });
+
+  it('shows validation error for short password', async () => {
+    render(<RegisterPage />);
+
+    await userEvent.type(screen.getByLabelText('Họ và tên'), 'Nguyen Van A');
+    await userEvent.type(screen.getByLabelText('Số điện thoại'), '0912345678');
+    await userEvent.type(screen.getByLabelText('Mật khẩu'), 'short');
+    await userEvent.type(screen.getByLabelText('Xác nhận mật khẩu'), 'short');
+    await userEvent.click(screen.getByRole('button', { name: /đăng ký/i }));
+
+    await waitFor(() => {
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('shows error when passwords do not match', async () => {
+    render(<RegisterPage />);
+
+    await userEvent.type(screen.getByLabelText('Họ và tên'), 'Nguyen Van A');
+    await userEvent.type(screen.getByLabelText('Số điện thoại'), '0912345678');
+    await userEvent.type(screen.getByLabelText('Mật khẩu'), 'password123');
+    await userEvent.type(screen.getByLabelText('Xác nhận mật khẩu'), 'differentpw');
+    await userEvent.click(screen.getByRole('button', { name: /đăng ký/i }));
+
+    await waitFor(() => {
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('displays store error message', () => {
+    mockStore.error = 'Số điện thoại đã tồn tại';
+    render(<RegisterPage />);
+    expect(screen.getByText('Số điện thoại đã tồn tại')).toBeInTheDocument();
+  });
+
+  it('navigates to home after successful registration', async () => {
+    mockStore.register.mockResolvedValue(undefined);
+    render(<RegisterPage />);
+
+    await userEvent.type(screen.getByLabelText('Họ và tên'), 'Nguyen Van A');
+    await userEvent.type(screen.getByLabelText('Số điện thoại'), '0912345678');
+    await userEvent.type(screen.getByLabelText('Mật khẩu'), 'password123');
+    await userEvent.type(screen.getByLabelText('Xác nhận mật khẩu'), 'password123');
+    await userEvent.click(screen.getByRole('button', { name: /đăng ký/i }));
+
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith('/');
+    });
+  });
+});

apps/web/app/(dashboard)/listings/__tests__/create-listing.spec.tsx

@@ -0,0 +1,110 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mockPush = vi.fn();
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockPush }),
+}));
+
+vi.mock('@/lib/listings-api', () => ({
+  listingsApi: {
+    create: vi.fn(),
+    uploadMedia: vi.fn(),
+  },
+}));
+
+vi.mock('@/components/listings/image-upload', () => ({
+  ImageUpload: ({ onChange }: { onChange: (imgs: unknown[]) => void }) => (
+    <div data-testid="image-upload">
+      <button type="button" onClick={() => onChange([])}>Upload Mock</button>
+    </div>
+  ),
+}));
+
+import { listingsApi } from '@/lib/listings-api';
+import CreateListingPage from '../new/page';
+
+const mockedListingsApi = vi.mocked(listingsApi);
+
+describe('CreateListingPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the page title and step indicators', () => {
+    render(<CreateListingPage />);
+
+    expect(screen.getByText('Đăng tin mới')).toBeInTheDocument();
+    expect(screen.getByText('Thông tin')).toBeInTheDocument();
+    expect(screen.getByText('Vị trí')).toBeInTheDocument();
+    expect(screen.getByText('Chi tiết')).toBeInTheDocument();
+    expect(screen.getByText('Giá cả')).toBeInTheDocument();
+    expect(screen.getByText('Hình ảnh')).toBeInTheDocument();
+  });
+
+  it('renders step 1 (basic info) initially', () => {
+    render(<CreateListingPage />);
+
+    expect(screen.getByText('Thông tin cơ bản')).toBeInTheDocument();
+    expect(screen.getByLabelText(/loại giao dịch/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/loại bất động sản/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/tiêu đề/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/mô tả/i)).toBeInTheDocument();
+  });
+
+  it('has back button disabled on first step', () => {
+    render(<CreateListingPage />);
+    expect(screen.getByRole('button', { name: /quay lại/i })).toBeDisabled();
+  });
+
+  it('navigates to step 2 when basic info is filled and next is clicked', async () => {
+    render(<CreateListingPage />);
+
+    // Fill step 1
+    await userEvent.selectOptions(screen.getByLabelText(/loại giao dịch/i), 'SALE');
+    await userEvent.selectOptions(screen.getByLabelText(/loại bất động sản/i), 'APARTMENT');
+    await userEvent.type(screen.getByLabelText(/tiêu đề/i), 'Bán căn hộ 2PN tại Quận 7');
+    await userEvent.type(screen.getByLabelText(/mô tả/i), 'Căn hộ view sông tuyệt đẹp, nội thất cao cấp');
+
+    await userEvent.click(screen.getByRole('button', { name: /tiếp theo/i }));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/địa chỉ/i)).toBeInTheDocument();
+    });
+  });
+
+  it('shows validation errors when required fields are empty on step 1', async () => {
+    render(<CreateListingPage />);
+
+    await userEvent.click(screen.getByRole('button', { name: /tiếp theo/i }));
+
+    // Step should not advance - still showing basic info
+    await waitFor(() => {
+      expect(screen.getByText('Thông tin cơ bản')).toBeInTheDocument();
+    });
+  });
+
+  it('navigates back to previous step', async () => {
+    render(<CreateListingPage />);
+
+    // Fill step 1 and go to step 2
+    await userEvent.selectOptions(screen.getByLabelText(/loại giao dịch/i), 'SALE');
+    await userEvent.selectOptions(screen.getByLabelText(/loại bất động sản/i), 'APARTMENT');
+    await userEvent.type(screen.getByLabelText(/tiêu đề/i), 'Test listing title here');
+    await userEvent.type(screen.getByLabelText(/mô tả/i), 'A detailed description of the property for sale');
+
+    await userEvent.click(screen.getByRole('button', { name: /tiếp theo/i }));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/địa chỉ/i)).toBeInTheDocument();
+    });
+
+    // Go back
+    await userEvent.click(screen.getByRole('button', { name: /quay lại/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Thông tin cơ bản')).toBeInTheDocument();
+    });
+  });
+});

apps/web/app/(public)/search/__tests__/search.spec.tsx

@@ -0,0 +1,140 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mockPush = vi.fn();
+const mockReplace = vi.fn();
+const mockSearchParams = new URLSearchParams();
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockPush, replace: mockReplace }),
+  useSearchParams: () => mockSearchParams,
+}));
+
+vi.mock('next/link', () => ({
+  default: ({ children, href, ...props }: { children: React.ReactNode; href: string; [key: string]: unknown }) => (
+    <a href={href} {...props}>{children}</a>
+  ),
+}));
+
+vi.mock('next/image', () => ({
+  default: (props: Record<string, unknown>) => <img {...props} />,
+}));
+
+// Mock dynamic import for map component
+vi.mock('next/dynamic', () => ({
+  default: () => {
+    const MockMap = () => <div data-testid="map-placeholder">Map</div>;
+    MockMap.displayName = 'MockMap';
+    return MockMap;
+  },
+}));
+
+const mockListings = {
+  data: [
+    {
+      id: '1',
+      status: 'ACTIVE',
+      transactionType: 'SALE',
+      priceVND: '5000000000',
+      pricePerM2: null,
+      rentPriceMonthly: null,
+      commissionPct: null,
+      viewCount: 10,
+      saveCount: 2,
+      inquiryCount: 1,
+      publishedAt: '2024-01-01',
+      createdAt: '2024-01-01',
+      property: {
+        id: 'p1',
+        propertyType: 'APARTMENT',
+        title: 'Căn hộ Quận 7',
+        description: 'Căn hộ view sông',
+        address: '123 Nguyễn Hữu Thọ',
+        ward: 'Phường Tân Hưng',
+        district: 'Quận 7',
+        city: 'Hồ Chí Minh',
+        areaM2: 75,
+        bedrooms: 2,
+        bathrooms: 2,
+        floors: null,
+        direction: null,
+        yearBuilt: null,
+        legalStatus: null,
+        amenities: null,
+        projectName: null,
+        media: [],
+      },
+      seller: { id: 's1', fullName: 'Nguyen Van A', phone: '0912345678' },
+      agent: null,
+    },
+  ],
+  total: 1,
+  page: 1,
+  limit: 12,
+  totalPages: 1,
+};
+
+vi.mock('@/lib/listings-api', () => ({
+  listingsApi: {
+    search: vi.fn(),
+  },
+}));
+
+import { listingsApi } from '@/lib/listings-api';
+import SearchPage from '../page';
+
+const mockedListingsApi = vi.mocked(listingsApi);
+
+describe('SearchPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockedListingsApi.search.mockResolvedValue(mockListings as never);
+  });
+
+  it('renders the search page title', async () => {
+    render(<SearchPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Tìm kiếm bất động sản')).toBeInTheDocument();
+    });
+  });
+
+  it('renders view mode toggle buttons', async () => {
+    render(<SearchPage />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /danh sách/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /bản đồ/i })).toBeInTheDocument();
+    });
+  });
+
+  it('calls listings API on mount', async () => {
+    render(<SearchPage />);
+
+    await waitFor(() => {
+      expect(mockedListingsApi.search).toHaveBeenCalled();
+    });
+  });
+
+  it('displays listing results after loading', async () => {
+    render(<SearchPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/căn hộ quận 7/i)).toBeInTheDocument();
+    });
+  });
+
+  it('switches to map view when map button is clicked', async () => {
+    render(<SearchPage />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /bản đồ/i })).toBeInTheDocument();
+    });
+
+    await userEvent.click(screen.getByRole('button', { name: /bản đồ/i }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('map-placeholder')).toBeInTheDocument();
+    });
+  });
+});

apps/web/components/ui/__tests__/badge.spec.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Badge } from '../badge';
+
+describe('Badge', () => {
+  it('renders with text content', () => {
+    render(<Badge>Active</Badge>);
+    expect(screen.getByText('Active')).toBeInTheDocument();
+  });
+
+  it('applies default variant styles', () => {
+    render(<Badge data-testid="badge">Default</Badge>);
+    expect(screen.getByTestId('badge')).toHaveClass('bg-primary');
+  });
+
+  it('applies destructive variant', () => {
+    render(<Badge data-testid="badge" variant="destructive">Error</Badge>);
+    expect(screen.getByTestId('badge')).toHaveClass('bg-destructive');
+  });
+
+  it('applies success variant', () => {
+    render(<Badge data-testid="badge" variant="success">OK</Badge>);
+    expect(screen.getByTestId('badge')).toHaveClass('bg-green-100');
+  });
+
+  it('applies warning variant', () => {
+    render(<Badge data-testid="badge" variant="warning">Warn</Badge>);
+    expect(screen.getByTestId('badge')).toHaveClass('bg-yellow-100');
+  });
+
+  it('applies custom className', () => {
+    render(<Badge data-testid="badge" className="extra">Custom</Badge>);
+    expect(screen.getByTestId('badge')).toHaveClass('extra');
+  });
+});

apps/web/components/ui/__tests__/button.spec.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { Button } from '../button';
+
+describe('Button', () => {
+  it('renders with children text', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+  });
+
+  it('handles click events', async () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Click</Button>);
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('does not fire click when disabled', async () => {
+    const onClick = vi.fn();
+    render(<Button disabled onClick={onClick}>Disabled</Button>);
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('applies variant classes for destructive', () => {
+    render(<Button variant="destructive">Delete</Button>);
+    expect(screen.getByRole('button')).toHaveClass('bg-destructive');
+  });
+
+  it('applies variant classes for outline', () => {
+    render(<Button variant="outline">Outline</Button>);
+    expect(screen.getByRole('button')).toHaveClass('border');
+  });
+
+  it('applies size classes for sm', () => {
+    render(<Button size="sm">Small</Button>);
+    expect(screen.getByRole('button')).toHaveClass('h-9');
+  });
+
+  it('applies size classes for lg', () => {
+    render(<Button size="lg">Large</Button>);
+    expect(screen.getByRole('button')).toHaveClass('h-11');
+  });
+
+  it('applies custom className', () => {
+    render(<Button className="custom-class">Custom</Button>);
+    expect(screen.getByRole('button')).toHaveClass('custom-class');
+  });
+
+  it('renders as submit button when type is set', () => {
+    render(<Button type="submit">Submit</Button>);
+    expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
+  });
+});

apps/web/components/ui/__tests__/card.spec.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../card';
+
+describe('Card', () => {
+  it('renders card with all sub-components', () => {
+    render(
+      <Card data-testid="card">
+        <CardHeader>
+          <CardTitle>Title</CardTitle>
+          <CardDescription>Description</CardDescription>
+        </CardHeader>
+        <CardContent>Content</CardContent>
+        <CardFooter>Footer</CardFooter>
+      </Card>,
+    );
+
+    expect(screen.getByTestId('card')).toBeInTheDocument();
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+    expect(screen.getByText('Footer')).toBeInTheDocument();
+  });
+
+  it('applies custom className to Card', () => {
+    render(<Card data-testid="card" className="custom">Content</Card>);
+    expect(screen.getByTestId('card')).toHaveClass('custom');
+    expect(screen.getByTestId('card')).toHaveClass('rounded-lg');
+  });
+
+  it('renders CardTitle as h3', () => {
+    render(<CardTitle>My Title</CardTitle>);
+    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('My Title');
+  });
+
+  it('renders CardDescription as paragraph', () => {
+    render(<CardDescription>My Description</CardDescription>);
+    expect(screen.getByText('My Description').tagName).toBe('P');
+  });
+});

apps/web/components/ui/__tests__/dialog.spec.tsx

@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../dialog';
+
+describe('Dialog', () => {
+  it('renders nothing when open is false', () => {
+    render(
+      <Dialog open={false} onOpenChange={() => {}}>
+        <DialogContent>
+          <DialogTitle>Hidden</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+    expect(screen.queryByText('Hidden')).not.toBeInTheDocument();
+  });
+
+  it('renders content when open is true', () => {
+    render(
+      <Dialog open={true} onOpenChange={() => {}}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Test Dialog</DialogTitle>
+            <DialogDescription>Dialog description</DialogDescription>
+          </DialogHeader>
+          <p>Body content</p>
+          <DialogFooter>
+            <button>OK</button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    expect(screen.getByText('Test Dialog')).toBeInTheDocument();
+    expect(screen.getByText('Dialog description')).toBeInTheDocument();
+    expect(screen.getByText('Body content')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'OK' })).toBeInTheDocument();
+  });
+
+  it('calls onOpenChange when backdrop is clicked', async () => {
+    const onOpenChange = vi.fn();
+    render(
+      <Dialog open={true} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogTitle>Closeable</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    // Click the backdrop (the overlay div)
+    const backdrop = document.querySelector('.bg-black\\/80');
+    if (backdrop) {
+      await userEvent.click(backdrop);
+    }
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it('does not close when clicking inside content', async () => {
+    const onOpenChange = vi.fn();
+    render(
+      <Dialog open={true} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogTitle>Stay Open</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    await userEvent.click(screen.getByText('Stay Open'));
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+});

apps/web/components/ui/__tests__/input.spec.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { Input } from '../input';
+
+describe('Input', () => {
+  it('renders an input element', () => {
+    render(<Input placeholder="Enter text" />);
+    expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
+  });
+
+  it('accepts and displays typed value', async () => {
+    render(<Input placeholder="Type here" />);
+    const input = screen.getByPlaceholderText('Type here');
+    await userEvent.type(input, 'Hello');
+    expect(input).toHaveValue('Hello');
+  });
+
+  it('applies type attribute', () => {
+    render(<Input type="email" placeholder="Email" />);
+    expect(screen.getByPlaceholderText('Email')).toHaveAttribute('type', 'email');
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Input disabled placeholder="Disabled" />);
+    expect(screen.getByPlaceholderText('Disabled')).toBeDisabled();
+  });
+
+  it('calls onChange handler', async () => {
+    const onChange = vi.fn();
+    render(<Input onChange={onChange} placeholder="Input" />);
+    await userEvent.type(screen.getByPlaceholderText('Input'), 'a');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('applies custom className', () => {
+    render(<Input className="my-class" placeholder="Custom" />);
+    expect(screen.getByPlaceholderText('Custom')).toHaveClass('my-class');
+  });
+});

apps/web/components/ui/__tests__/label.spec.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Label } from '../label';
+
+describe('Label', () => {
+  it('renders label text', () => {
+    render(<Label>Số điện thoại</Label>);
+    expect(screen.getByText('Số điện thoại')).toBeInTheDocument();
+  });
+
+  it('associates with input via htmlFor', () => {
+    render(
+      <>
+        <Label htmlFor="phone">Phone</Label>
+        <input id="phone" />
+      </>,
+    );
+    expect(screen.getByLabelText('Phone')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    render(<Label data-testid="label" className="custom">Label</Label>);
+    expect(screen.getByTestId('label')).toHaveClass('custom');
+  });
+});

apps/web/components/ui/__tests__/select.spec.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { Select } from '../select';
+
+describe('Select', () => {
+  it('renders with options', () => {
+    render(
+      <Select aria-label="Property type">
+        <option value="">Chọn loại</option>
+        <option value="APARTMENT">Căn hộ</option>
+        <option value="HOUSE">Nhà phố</option>
+      </Select>,
+    );
+    expect(screen.getByRole('combobox', { name: 'Property type' })).toBeInTheDocument();
+    expect(screen.getAllByRole('option')).toHaveLength(3);
+  });
+
+  it('handles value change', async () => {
+    const onChange = vi.fn();
+    render(
+      <Select aria-label="Type" onChange={onChange}>
+        <option value="">Chọn</option>
+        <option value="SALE">Bán</option>
+        <option value="RENT">Cho thuê</option>
+      </Select>,
+    );
+    await userEvent.selectOptions(screen.getByRole('combobox'), 'SALE');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(
+      <Select disabled aria-label="Disabled select">
+        <option>Option</option>
+      </Select>,
+    );
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+});

apps/web/components/ui/__tests__/table.spec.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '../table';
+
+describe('Table', () => {
+  it('renders a complete table structure', () => {
+    render(
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Price</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Apartment</TableCell>
+            <TableCell>1,000,000 VND</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Price')).toBeInTheDocument();
+    expect(screen.getByText('Apartment')).toBeInTheDocument();
+    expect(screen.getByText('1,000,000 VND')).toBeInTheDocument();
+  });
+
+  it('renders multiple rows', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow><TableCell>Row 1</TableCell></TableRow>
+          <TableRow><TableCell>Row 2</TableCell></TableRow>
+          <TableRow><TableCell>Row 3</TableCell></TableRow>
+        </TableBody>
+      </Table>,
+    );
+
+    expect(screen.getAllByRole('row')).toHaveLength(3);
+  });
+
+  it('applies custom className to table elements', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow data-testid="row" className="highlight">
+            <TableCell data-testid="cell" className="bold">Data</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+
+    expect(screen.getByTestId('row')).toHaveClass('highlight');
+    expect(screen.getByTestId('cell')).toHaveClass('bold');
+  });
+});

apps/web/components/ui/__tests__/textarea.spec.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Textarea } from '../textarea';
+
+describe('Textarea', () => {
+  it('renders a textarea element', () => {
+    render(<Textarea placeholder="Mô tả" />);
+    expect(screen.getByPlaceholderText('Mô tả')).toBeInTheDocument();
+  });
+
+  it('accepts typed input', async () => {
+    render(<Textarea placeholder="Nhập nội dung" />);
+    const textarea = screen.getByPlaceholderText('Nhập nội dung');
+    await userEvent.type(textarea, 'Test content');
+    expect(textarea).toHaveValue('Test content');
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Textarea disabled placeholder="Disabled" />);
+    expect(screen.getByPlaceholderText('Disabled')).toBeDisabled();
+  });
+
+  it('applies custom className', () => {
+    render(<Textarea className="tall" placeholder="Custom" />);
+    expect(screen.getByPlaceholderText('Custom')).toHaveClass('tall');
+  });
+});

apps/web/lib/__tests__/auth-store.spec.ts

@@ -0,0 +1,216 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useAuthStore } from '../auth-store';
+import { ApiError } from '../api-client';
+
+// Mock auth-api module
+vi.mock('../auth-api', () => ({
+  authApi: {
+    login: vi.fn(),
+    register: vi.fn(),
+    logout: vi.fn(),
+    refresh: vi.fn(),
+    exchangeToken: vi.fn(),
+    getProfile: vi.fn(),
+  },
+}));
+
+// Import mocked module
+import { authApi } from '../auth-api';
+const mockedAuthApi = vi.mocked(authApi);
+
+const mockUser = {
+  id: '1',
+  email: 'test@example.com',
+  phone: '0912345678',
+  fullName: 'Nguyen Van A',
+  avatarUrl: null,
+  role: 'user',
+  kycStatus: 'pending',
+  isActive: true,
+  createdAt: '2024-01-01',
+};
+
+describe('useAuthStore', () => {
+  beforeEach(() => {
+    // Reset store state
+    useAuthStore.setState({
+      user: null,
+      isAuthenticated: false,
+      isLoading: false,
+      error: null,
+    });
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('initial state', () => {
+    it('starts with null user and unauthenticated', () => {
+      const state = useAuthStore.getState();
+      expect(state.user).toBeNull();
+      expect(state.isAuthenticated).toBe(false);
+      expect(state.isLoading).toBe(false);
+      expect(state.error).toBeNull();
+    });
+  });
+
+  describe('login', () => {
+    it('sets isAuthenticated and fetches profile on success', async () => {
+      mockedAuthApi.login.mockResolvedValue({ message: 'ok' });
+      mockedAuthApi.getProfile.mockResolvedValue(mockUser);
+
+      await useAuthStore.getState().login({ phone: '0912345678', password: 'pass123' });
+
+      const state = useAuthStore.getState();
+      expect(state.isAuthenticated).toBe(true);
+      expect(state.user).toEqual(mockUser);
+      expect(state.isLoading).toBe(false);
+      expect(state.error).toBeNull();
+    });
+
+    it('sets error on login failure', async () => {
+      mockedAuthApi.login.mockRejectedValue(new ApiError(401, 'Sai mật khẩu'));
+
+      await expect(
+        useAuthStore.getState().login({ phone: '0912345678', password: 'wrong' }),
+      ).rejects.toThrow();
+
+      const state = useAuthStore.getState();
+      expect(state.isAuthenticated).toBe(false);
+      expect(state.error).toBe('Sai mật khẩu');
+      expect(state.isLoading).toBe(false);
+    });
+
+    it('uses default error message for non-ApiError', async () => {
+      mockedAuthApi.login.mockRejectedValue(new Error('Network error'));
+
+      await expect(
+        useAuthStore.getState().login({ phone: '0912345678', password: 'pass' }),
+      ).rejects.toThrow();
+
+      expect(useAuthStore.getState().error).toBe('Đăng nhập thất bại');
+    });
+  });
+
+  describe('register', () => {
+    it('sets isAuthenticated and fetches profile on success', async () => {
+      mockedAuthApi.register.mockResolvedValue({ message: 'ok' });
+      mockedAuthApi.getProfile.mockResolvedValue(mockUser);
+
+      await useAuthStore.getState().register({
+        phone: '0912345678',
+        password: 'password123',
+        fullName: 'Nguyen Van A',
+      });
+
+      const state = useAuthStore.getState();
+      expect(state.isAuthenticated).toBe(true);
+      expect(state.user).toEqual(mockUser);
+    });
+
+    it('sets error on register failure', async () => {
+      mockedAuthApi.register.mockRejectedValue(new ApiError(409, 'Số điện thoại đã tồn tại'));
+
+      await expect(
+        useAuthStore.getState().register({
+          phone: '0912345678',
+          password: 'pass',
+          fullName: 'Test',
+        }),
+      ).rejects.toThrow();
+
+      expect(useAuthStore.getState().error).toBe('Số điện thoại đã tồn tại');
+    });
+  });
+
+  describe('logout', () => {
+    it('clears user and auth state', async () => {
+      useAuthStore.setState({ user: mockUser, isAuthenticated: true });
+      mockedAuthApi.logout.mockResolvedValue({ message: 'ok' });
+
+      await useAuthStore.getState().logout();
+
+      const state = useAuthStore.getState();
+      expect(state.user).toBeNull();
+      expect(state.isAuthenticated).toBe(false);
+    });
+
+    it('clears state even if API logout fails', async () => {
+      useAuthStore.setState({ user: mockUser, isAuthenticated: true });
+      mockedAuthApi.logout.mockRejectedValue(new Error('Network error'));
+
+      await useAuthStore.getState().logout();
+
+      expect(useAuthStore.getState().user).toBeNull();
+      expect(useAuthStore.getState().isAuthenticated).toBe(false);
+    });
+  });
+
+  describe('refreshToken', () => {
+    it('returns true and sets authenticated on success', async () => {
+      mockedAuthApi.refresh.mockResolvedValue({ message: 'ok' });
+
+      const result = await useAuthStore.getState().refreshToken();
+
+      expect(result).toBe(true);
+      expect(useAuthStore.getState().isAuthenticated).toBe(true);
+    });
+
+    it('returns false and clears state on failure', async () => {
+      useAuthStore.setState({ user: mockUser, isAuthenticated: true });
+      mockedAuthApi.refresh.mockRejectedValue(new Error('expired'));
+
+      const result = await useAuthStore.getState().refreshToken();
+
+      expect(result).toBe(false);
+      expect(useAuthStore.getState().user).toBeNull();
+      expect(useAuthStore.getState().isAuthenticated).toBe(false);
+    });
+  });
+
+  describe('fetchProfile', () => {
+    it('fetches and sets user profile', async () => {
+      mockedAuthApi.getProfile.mockResolvedValue(mockUser);
+
+      await useAuthStore.getState().fetchProfile();
+
+      expect(useAuthStore.getState().user).toEqual(mockUser);
+      expect(useAuthStore.getState().isAuthenticated).toBe(true);
+    });
+
+    it('attempts refresh on 401 and retries profile', async () => {
+      mockedAuthApi.getProfile
+        .mockRejectedValueOnce(new ApiError(401, 'Unauthorized'))
+        .mockResolvedValueOnce(mockUser);
+      mockedAuthApi.refresh.mockResolvedValue({ message: 'ok' });
+
+      await useAuthStore.getState().fetchProfile();
+
+      expect(mockedAuthApi.refresh).toHaveBeenCalled();
+      expect(useAuthStore.getState().user).toEqual(mockUser);
+    });
+  });
+
+  describe('handleOAuthCallback', () => {
+    it('exchanges token and fetches profile', async () => {
+      mockedAuthApi.exchangeToken.mockResolvedValue({ message: 'ok' });
+      mockedAuthApi.getProfile.mockResolvedValue(mockUser);
+
+      await useAuthStore.getState().handleOAuthCallback('access', 'refresh', 3600);
+
+      expect(mockedAuthApi.exchangeToken).toHaveBeenCalledWith('access', 'refresh', 3600);
+      expect(useAuthStore.getState().isAuthenticated).toBe(true);
+      expect(useAuthStore.getState().user).toEqual(mockUser);
+    });
+  });
+
+  describe('clearError', () => {
+    it('clears the error state', () => {
+      useAuthStore.setState({ error: 'Some error' });
+      useAuthStore.getState().clearError();
+      expect(useAuthStore.getState().error).toBeNull();
+    });
+  });
+});

apps/web/package.json

@@ -27,11 +27,17 @@
     "zustand": "^5.0.12"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/mapbox-gl": "^3.5.0",
     "@types/node": "^25.5.2",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.7.0",
     "autoprefixer": "^10.4.0",
+    "jsdom": "^29.0.2",
+    "msw": "^2.13.2",
     "postcss": "^8.4.0",
     "tailwindcss": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",

apps/web/vitest.config.ts

@@ -1,9 +1,14 @@
+import react from '@vitejs/plugin-react';
 import path from 'path';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
+  plugins: [react()],
   test: {
-    include: ['**/__tests__/**/*.spec.ts', '**/__tests__/**/*.test.ts'],
+    include: ['**/__tests__/**/*.spec.ts', '**/__tests__/**/*.test.ts', '**/__tests__/**/*.spec.tsx', '**/__tests__/**/*.test.tsx'],
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    globals: true,
   },
   resolve: {
     alias: {

apps/web/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';