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/app/[locale]/(dashboard)/leads/page.tsx

@@ -0,0 +1,291 @@
+'use client';
+
+import * as React from 'react';
+import { CreateLeadDialog } from '@/components/leads/create-lead-dialog';
+import { LeadDetailDialog } from '@/components/leads/lead-detail-dialog';
+import { LeadStatusBadge } from '@/components/leads/lead-status-badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Select } from '@/components/ui/select';
+import { useLeads, useLeadStats } from '@/lib/hooks/use-leads';
+import { LEAD_STATUSES, LEAD_SOURCES, type LeadReadDto, type LeadStatus } from '@/lib/leads-api';
+
+function getSourceLabel(source: string): string {
+  const found = LEAD_SOURCES.find((s) => s.value === source);
+  return found?.label ?? source;
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('vi-VN', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  });
+}
+
+export default function LeadsPage() {
+  const [page, setPage] = React.useState(1);
+  const [statusFilter, setStatusFilter] = React.useState<LeadStatus | ''>('');
+  const [createOpen, setCreateOpen] = React.useState(false);
+  const [selectedLead, setSelectedLead] = React.useState<LeadReadDto | null>(null);
+  const [detailOpen, setDetailOpen] = React.useState(false);
+
+  const searchParams = React.useMemo(() => {
+    const params: { page: number; limit: number; status?: LeadStatus } = { page, limit: 20 };
+    if (statusFilter) params.status = statusFilter;
+    return params;
+  }, [page, statusFilter]);
+
+  const { data: result, isLoading: loading } = useLeads(searchParams);
+  const { data: stats, isLoading: statsLoading } = useLeadStats();
+
+  const handleSelectLead = (lead: LeadReadDto) => {
+    setSelectedLead(lead);
+    setDetailOpen(true);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Quản lý lead</h1>
+          <p className="text-sm text-muted-foreground">
+            Theo dõi và chuyển đổi khách hàng tiềm năng
+          </p>
+        </div>
+        <Button onClick={() => setCreateOpen(true)}>Thêm lead</Button>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>Tổng lead</CardDescription>
+            <CardTitle className="text-xl">
+              {statsLoading ? '...' : stats?.totalLeads ?? 0}
+            </CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>Tỷ lệ chuyển đổi</CardDescription>
+            <CardTitle className="text-xl text-green-600">
+              {statsLoading ? '...' : `${(stats?.conversionRate ?? 0).toFixed(1)}%`}
+            </CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>Điểm TB</CardDescription>
+            <CardTitle className="text-xl text-blue-600">
+              {statsLoading ? '...' : stats?.avgScore !== null ? stats?.avgScore?.toFixed(0) : 'N/A'}
+            </CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>Lead mới</CardDescription>
+            <CardTitle className="text-xl text-yellow-600">
+              {statsLoading ? '...' : stats?.byStatus?.['NEW'] ?? 0}
+            </CardTitle>
+          </CardHeader>
+        </Card>
+      </div>
+
+      {/* Status breakdown */}
+      {stats && !statsLoading && (
+        <div className="flex flex-wrap gap-2">
+          {Object.entries(stats.byStatus).map(([status, count]) => {
+            const config = LEAD_STATUSES[status as LeadStatus];
+            if (!config || count === 0) return null;
+            return (
+              <button
+                key={status}
+                onClick={() => {
+                  setStatusFilter(status === statusFilter ? '' : (status as LeadStatus));
+                  setPage(1);
+                }}
+                className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-sm transition-colors hover:bg-accent ${
+                  status === statusFilter ? 'bg-accent border-primary' : ''
+                }`}
+              >
+                <LeadStatusBadge status={status as LeadStatus} />
+                <span className="text-muted-foreground">{count}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="flex items-center gap-3">
+        <Select
+          value={statusFilter}
+          onChange={(e) => {
+            setStatusFilter(e.target.value as LeadStatus | '');
+            setPage(1);
+          }}
+          className="w-44"
+        >
+          <option value="">Tất cả trạng thái</option>
+          {Object.entries(LEAD_STATUSES).map(([value, { label }]) => (
+            <option key={value} value={value}>
+              {label}
+            </option>
+          ))}
+        </Select>
+        {result && (
+          <span className="text-sm text-muted-foreground">
+            {result.total} lead
+          </span>
+        )}
+      </div>
+
+      {/* Content */}
+      {loading ? (
+        <div className="flex min-h-[300px] items-center justify-center">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+        </div>
+      ) : !result || result.data.length === 0 ? (
+        <div className="flex min-h-[300px] flex-col items-center justify-center text-muted-foreground">
+          <p className="text-4xl mb-3">📋</p>
+          <p>Chưa có lead nào</p>
+          <Button variant="outline" size="sm" className="mt-3" onClick={() => setCreateOpen(true)}>
+            Thêm lead đầu tiên
+          </Button>
+        </div>
+      ) : (
+        <>
+          {/* Mobile card view */}
+          <div className="space-y-3 sm:hidden">
+            {result.data.map((lead) => (
+              <Card
+                key={lead.id}
+                className="cursor-pointer transition-shadow hover:shadow-md"
+                onClick={() => handleSelectLead(lead)}
+              >
+                <CardContent className="p-4">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="min-w-0 flex-1">
+                      <p className="font-medium">{lead.name}</p>
+                      <p className="text-xs text-muted-foreground">{lead.phone}</p>
+                    </div>
+                    <LeadStatusBadge status={lead.status} />
+                  </div>
+                  <div className="mt-2 flex flex-wrap gap-2 text-xs text-muted-foreground">
+                    <span>{getSourceLabel(lead.source)}</span>
+                    {lead.score !== null && <span>Điểm: {lead.score}</span>}
+                    <span>{formatDate(lead.createdAt)}</span>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* Desktop table view */}
+          <Card className="hidden sm:block">
+            <CardContent className="p-0">
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b text-left">
+                      <th className="p-3 font-medium">Khách hàng</th>
+                      <th className="p-3 font-medium">Nguồn</th>
+                      <th className="p-3 font-medium text-center">Điểm</th>
+                      <th className="p-3 font-medium text-center">Trạng thái</th>
+                      <th className="p-3 font-medium text-right">Ngày tạo</th>
+                      <th className="p-3 font-medium text-right">Cập nhật</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {result.data.map((lead) => (
+                      <tr
+                        key={lead.id}
+                        className="border-b last:border-0 cursor-pointer transition-colors hover:bg-accent/50"
+                        onClick={() => handleSelectLead(lead)}
+                      >
+                        <td className="p-3">
+                          <div className="flex flex-col gap-0.5">
+                            <span className="font-medium">{lead.name}</span>
+                            <span className="text-xs text-muted-foreground">{lead.phone}</span>
+                            {lead.email && (
+                              <span className="text-xs text-muted-foreground">{lead.email}</span>
+                            )}
+                          </div>
+                        </td>
+                        <td className="p-3 text-muted-foreground">
+                          {getSourceLabel(lead.source)}
+                        </td>
+                        <td className="p-3 text-center">
+                          {lead.score !== null ? (
+                            <div className="flex flex-col items-center gap-1">
+                              <span className="font-medium">{lead.score}</span>
+                              <div className="h-1 w-12 rounded-full bg-muted">
+                                <div
+                                  className="h-1 rounded-full bg-primary"
+                                  style={{ width: `${lead.score}%` }}
+                                />
+                              </div>
+                            </div>
+                          ) : (
+                            <span className="text-muted-foreground">—</span>
+                          )}
+                        </td>
+                        <td className="p-3 text-center">
+                          <LeadStatusBadge status={lead.status} />
+                        </td>
+                        <td className="p-3 text-right text-xs text-muted-foreground">
+                          {formatDate(lead.createdAt)}
+                        </td>
+                        <td className="p-3 text-right text-xs text-muted-foreground">
+                          {formatDate(lead.updatedAt)}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        </>
+      )}
+
+      {/* Pagination */}
+      {result && result.totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page <= 1}
+            onClick={() => setPage((p) => p - 1)}
+          >
+            Trước
+          </Button>
+          <span className="text-sm text-muted-foreground">
+            Trang {result.page} / {result.totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page >= result.totalPages}
+            onClick={() => setPage((p) => p + 1)}
+          >
+            Tiếp
+          </Button>
+        </div>
+      )}
+
+      {/* Dialogs */}
+      <CreateLeadDialog open={createOpen} onOpenChange={setCreateOpen} />
+      <LeadDetailDialog
+        lead={selectedLead}
+        open={detailOpen}
+        onOpenChange={(open) => {
+          setDetailOpen(open);
+          if (!open) setSelectedLead(null);
+        }}
+      />
+    </div>
+  );
+}