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>
This commit is contained in:
Ho Ngoc Hai
214
apps/web/app/[locale]/(dashboard)/inquiries/page.tsx
Normal file
214
apps/web/app/[locale]/(dashboard)/inquiries/page.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { InquiryDetailDialog } from '@/components/inquiries/inquiry-detail-dialog';
|
||||
import { InquiryRow, InquiryStatusBadge } from '@/components/inquiries/inquiry-row';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Select } from '@/components/ui/select';
|
||||
import { useMyInquiries } from '@/lib/hooks/use-inquiries';
|
||||
import type { InquiryReadDto } from '@/lib/inquiries-api';
|
||||
|
||||
type ReadFilter = 'all' | 'unread' | 'read';
|
||||
|
||||
export default function InquiriesPage() {
|
||||
const [page, setPage] = React.useState(1);
|
||||
const [readFilter, setReadFilter] = React.useState<ReadFilter>('all');
|
||||
const [selectedInquiry, setSelectedInquiry] = React.useState<InquiryReadDto | null>(null);
|
||||
const [dialogOpen, setDialogOpen] = React.useState(false);
|
||||
|
||||
const { data: result, isLoading: loading } = useMyInquiries({ page, limit: 20 });
|
||||
|
||||
// Client-side filter for read/unread since API doesn't support it directly
|
||||
const filteredData = React.useMemo(() => {
|
||||
if (!result) return [];
|
||||
if (readFilter === 'all') return result.data;
|
||||
if (readFilter === 'unread') return result.data.filter((i) => !i.isRead);
|
||||
return result.data.filter((i) => i.isRead);
|
||||
}, [result, readFilter]);
|
||||
|
||||
const stats = React.useMemo(() => {
|
||||
if (!result) return { total: 0, unread: 0, read: 0 };
|
||||
return {
|
||||
total: result.total,
|
||||
unread: result.data.filter((i) => !i.isRead).length,
|
||||
read: result.data.filter((i) => i.isRead).length,
|
||||
};
|
||||
}, [result]);
|
||||
|
||||
const handleSelectInquiry = (inquiry: InquiryReadDto) => {
|
||||
setSelectedInquiry(inquiry);
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Quản lý liên hệ</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Xem và phản hồi các yêu cầu tư vấn từ khách hàng
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Tổng liên hệ</CardDescription>
|
||||
<CardTitle className="text-xl">{loading ? '...' : stats.total}</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Chưa đọc</CardDescription>
|
||||
<CardTitle className="text-xl text-blue-600">
|
||||
{loading ? '...' : stats.unread}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Đã đọc</CardDescription>
|
||||
<CardTitle className="text-xl text-green-600">
|
||||
{loading ? '...' : stats.read}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Select
|
||||
value={readFilter}
|
||||
onChange={(e) => {
|
||||
setReadFilter(e.target.value as ReadFilter);
|
||||
setPage(1);
|
||||
}}
|
||||
className="w-40"
|
||||
>
|
||||
<option value="all">Tất cả</option>
|
||||
<option value="unread">Chưa đọc</option>
|
||||
<option value="read">Đã đọc</option>
|
||||
</Select>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{filteredData.length} liên hệ
|
||||
</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>
|
||||
) : filteredData.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ó liên hệ nào</p>
|
||||
<p className="text-xs mt-1">
|
||||
Khi khách hàng gửi yêu cầu tư vấn, chúng sẽ xuất hiện ở đây
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Mobile card view */}
|
||||
<div className="space-y-3 sm:hidden">
|
||||
{filteredData.map((inquiry) => (
|
||||
<Card
|
||||
key={inquiry.id}
|
||||
className="cursor-pointer transition-shadow hover:shadow-md"
|
||||
onClick={() => handleSelectInquiry(inquiry)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="font-medium">{inquiry.userName}</p>
|
||||
<p className="text-xs text-muted-foreground">{inquiry.userPhone}</p>
|
||||
</div>
|
||||
<InquiryStatusBadge isRead={inquiry.isRead} />
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-muted-foreground line-clamp-1">
|
||||
{inquiry.listingTitle}
|
||||
</p>
|
||||
<p className="mt-1 text-sm line-clamp-2">{inquiry.message}</p>
|
||||
<p className="mt-2 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',
|
||||
})}
|
||||
</p>
|
||||
</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">Tin đăng</th>
|
||||
<th className="hidden p-3 font-medium sm:table-cell">Nội dung</th>
|
||||
<th className="p-3 font-medium text-center">Trạng thái</th>
|
||||
<th className="p-3 font-medium text-right">Ngày gửi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredData.map((inquiry) => (
|
||||
<InquiryRow
|
||||
key={inquiry.id}
|
||||
inquiry={inquiry}
|
||||
onSelect={handleSelectInquiry}
|
||||
/>
|
||||
))}
|
||||
</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>
|
||||
)}
|
||||
|
||||
{/* Detail Dialog */}
|
||||
<InquiryDetailDialog
|
||||
inquiry={selectedInquiry}
|
||||
open={dialogOpen}
|
||||
onOpenChange={(open) => {
|
||||
setDialogOpen(open);
|
||||
if (!open) setSelectedInquiry(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user