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/inquiries/__tests__/inquiry-detail-dialog.spec.tsx

@@ -0,0 +1,161 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import type { InquiryReadDto } from '@/lib/inquiries-api';
+import { InquiryDetailDialog } from '../inquiry-detail-dialog';
+
+// Mock the hook
+const mockMarkReadMutate = vi.fn();
+vi.mock('@/lib/hooks/use-inquiries', () => ({
+  useMarkInquiryRead: () => ({
+    mutate: mockMarkReadMutate,
+    isPending: false,
+  }),
+}));
+
+// Mock InquiryStatusBadge
+vi.mock('@/components/inquiries/inquiry-row', () => ({
+  InquiryStatusBadge: ({ isRead }: { isRead: boolean }) => (
+    <span>{isRead ? 'Đã đọc' : 'Chưa đọc'}</span>
+  ),
+}));
+
+// Mock Dialog
+vi.mock('@/components/ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: React.ReactNode; open: boolean }) =>
+    open ? <div data-testid="dialog">{children}</div> : null,
+  DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DialogHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DialogTitle: ({ children }: { children: React.ReactNode }) => <h2>{children}</h2>,
+  DialogDescription: ({ children }: { children: React.ReactNode }) => <p>{children}</p>,
+  DialogFooter: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+const mockInquiry: InquiryReadDto = {
+  id: 'inq-1',
+  listingId: 'listing-1',
+  listingTitle: 'Căn hộ 3PN Quận 2',
+  userId: 'user-1',
+  userName: 'Nguyễn Minh C',
+  userPhone: '0912345678',
+  message: 'Tôi muốn xem nhà vào thứ 7 tuần sau',
+  phone: null,
+  isRead: false,
+  createdAt: '2026-02-10T09:00:00Z',
+};
+
+describe('InquiryDetailDialog', () => {
+  beforeEach(() => {
+    mockMarkReadMutate.mockClear();
+  });
+
+  it('returns null when inquiry is null', () => {
+    const { container } = render(
+      <InquiryDetailDialog inquiry={null} open={true} onOpenChange={vi.fn()} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders dialog title', () => {
+    render(
+      <InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
+    );
+    expect(screen.getByText('Chi tiết liên hệ')).toBeInTheDocument();
+  });
+
+  it('renders listing title', () => {
+    render(
+      <InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
+    );
+    expect(screen.getByText('Căn hộ 3PN Quận 2')).toBeInTheDocument();
+  });
+
+  it('renders user name', () => {
+    render(
+      <InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
+    );
+    expect(screen.getByText('Nguyễn Minh C')).toBeInTheDocument();
+  });
+
+  it('renders phone number', () => {
+    render(
+      <InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
+    );
+    expect(screen.getByText(/0912345678/)).toBeInTheDocument();
+  });
+
+  it('renders inquiry message', () => {
+    render(
+      <InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
+    );
+    expect(screen.getByText('Tôi muốn xem nhà vào thứ 7 tuần sau')).toBeInTheDocument();
+  });
+
+  it('renders unread status', () => {
+    render(
+      <InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
+    );
+    expect(screen.getByText('Chưa đọc')).toBeInTheDocument();
+  });
+
+  it('renders mark as read button when unread', () => {
+    render(
+      <InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
+    );
+    expect(screen.getByText('Đánh dấu đã đọc')).toBeInTheDocument();
+  });
+
+  it('does not render mark as read button when already read', () => {
+    const readInquiry = { ...mockInquiry, isRead: true };
+    render(
+      <InquiryDetailDialog inquiry={readInquiry} open={true} onOpenChange={vi.fn()} />,
+    );
+    expect(screen.queryByText('Đánh dấu đã đọc')).not.toBeInTheDocument();
+  });
+
+  it('calls mutate when mark as read is clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
+    );
+
+    await user.click(screen.getByText('Đánh dấu đã đọc'));
+    expect(mockMarkReadMutate).toHaveBeenCalledWith('inq-1', expect.any(Object));
+  });
+
+  it('renders quick contact links', () => {
+    render(
+      <InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
+    );
+    // Emoji prefixed text
+    const content = document.body.textContent;
+    expect(content).toContain('Gọi điện');
+    expect(content).toContain('Zalo');
+  });
+
+  it('renders close button', () => {
+    render(
+      <InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={vi.fn()} />,
+    );
+    expect(screen.getByText('Đóng')).toBeInTheDocument();
+  });
+
+  it('calls onOpenChange when close is clicked', async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <InquiryDetailDialog inquiry={mockInquiry} open={true} onOpenChange={onOpenChange} />,
+    );
+
+    await user.click(screen.getByText('Đóng'));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it('uses inquiry.phone when available over userPhone', () => {
+    const inquiryWithPhone = { ...mockInquiry, phone: '0987654321' };
+    render(
+      <InquiryDetailDialog inquiry={inquiryWithPhone} open={true} onOpenChange={vi.fn()} />,
+    );
+    expect(screen.getByText(/0987654321/)).toBeInTheDocument();
+  });
+});

apps/web/components/inquiries/inquiry-detail-dialog.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { InquiryStatusBadge } from '@/components/inquiries/inquiry-row';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { useMarkInquiryRead } from '@/lib/hooks/use-inquiries';
+import type { InquiryReadDto } from '@/lib/inquiries-api';
+
+interface InquiryDetailDialogProps {
+  inquiry: InquiryReadDto | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function InquiryDetailDialog({ inquiry, open, onOpenChange }: InquiryDetailDialogProps) {
+  const markAsRead = useMarkInquiryRead();
+
+  if (!inquiry) return null;
+
+  const handleMarkRead = () => {
+    markAsRead.mutate(inquiry.id, {
+      onSuccess: () => {
+        onOpenChange(false);
+      },
+    });
+  };
+
+  const formattedDate = new Date(inquiry.createdAt).toLocaleDateString('vi-VN', {
+    weekday: 'long',
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Chi tiết liên hệ</DialogTitle>
+          <DialogDescription>
+            {inquiry.listingTitle}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          {/* Contact info */}
+          <div className="rounded-lg border p-4 space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">{inquiry.userName}</span>
+              <InquiryStatusBadge isRead={inquiry.isRead} />
+            </div>
+            <div className="space-y-1 text-sm text-muted-foreground">
+              <p>SĐT: {inquiry.phone ?? inquiry.userPhone}</p>
+              <p>Ngày gửi: {formattedDate}</p>
+            </div>
+          </div>
+
+          {/* Message */}
+          <div className="space-y-1.5">
+            <h4 className="text-sm font-medium">Nội dung</h4>
+            <div className="rounded-lg bg-muted p-3 text-sm leading-relaxed">
+              {inquiry.message}
+            </div>
+          </div>
+
+          {/* Quick actions */}
+          <div className="space-y-1.5">
+            <h4 className="text-sm font-medium">Liên hệ nhanh</h4>
+            <div className="flex flex-wrap gap-2">
+              <a
+                href={`tel:${inquiry.phone ?? inquiry.userPhone}`}
+                className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
+              >
+                📞 Gọi điện
+              </a>
+              <a
+                href={`https://zalo.me/${(inquiry.phone ?? inquiry.userPhone).replace(/^0/, '84')}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
+              >
+                💬 Zalo
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Đóng
+          </Button>
+          {!inquiry.isRead && (
+            <Button onClick={handleMarkRead} disabled={markAsRead.isPending}>
+              {markAsRead.isPending ? 'Đang xử lý...' : 'Đánh dấu đã đọc'}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/components/inquiries/inquiry-row.tsx

@@ -0,0 +1,54 @@
+import { Badge } from '@/components/ui/badge';
+import type { InquiryReadDto } from '@/lib/inquiries-api';
+
+interface InquiryStatusBadgeProps {
+  isRead: boolean;
+}
+
+export function InquiryStatusBadge({ isRead }: InquiryStatusBadgeProps) {
+  if (isRead) {
+    return <Badge variant="secondary">Đã đọc</Badge>;
+  }
+  return <Badge variant="info">Chưa đọc</Badge>;
+}
+
+interface InquiryRowProps {
+  inquiry: InquiryReadDto;
+  onSelect: (inquiry: InquiryReadDto) => void;
+}
+
+export function InquiryRow({ inquiry, onSelect }: InquiryRowProps) {
+  return (
+    <tr
+      className="border-b last:border-0 cursor-pointer transition-colors hover:bg-accent/50"
+      onClick={() => onSelect(inquiry)}
+    >
+      <td className="p-3">
+        <div className="flex flex-col gap-0.5">
+          <span className="font-medium">{inquiry.userName}</span>
+          <span className="text-xs text-muted-foreground">{inquiry.userPhone}</span>
+        </div>
+      </td>
+      <td className="p-3">
+        <span className="line-clamp-1 text-sm text-muted-foreground">
+          {inquiry.listingTitle}
+        </span>
+      </td>
+      <td className="hidden p-3 sm:table-cell">
+        <span className="line-clamp-2 text-sm">{inquiry.message}</span>
+      </td>
+      <td className="p-3 text-center">
+        <InquiryStatusBadge isRead={inquiry.isRead} />
+      </td>
+      <td className="p-3 text-right text-xs text-muted-foreground">
+        {new Date(inquiry.createdAt).toLocaleDateString('vi-VN', {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+        })}
+      </td>
+    </tr>
+  );
+}