feat(web): add Admin module frontend — dashboard, users, moderation, KYC
Build the complete admin panel UI at apps/web/app/(admin)/: - Admin layout with sidebar navigation and ADMIN role guard - Dashboard page with stats cards and revenue chart - User management with search, filters, pagination, detail panel, ban/unban - Listings moderation queue with approve/reject/bulk actions - KYC review page with document viewer and approve/reject flow - New reusable UI components: Dialog, Table Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
412
apps/web/app/(admin)/admin/kyc/page.tsx
Normal file
412
apps/web/app/(admin)/admin/kyc/page.tsx
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState, useCallback } from 'react';
|
||||||
|
import {
|
||||||
|
CheckCircle,
|
||||||
|
XCircle,
|
||||||
|
RefreshCw,
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
FileText,
|
||||||
|
ShieldCheck,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { useAuthStore } from '@/lib/auth-store';
|
||||||
|
import { adminApi, type KycQueueItem, type PaginatedResult } from '@/lib/admin-api';
|
||||||
|
|
||||||
|
function kycStatusBadge(status: string) {
|
||||||
|
switch (status) {
|
||||||
|
case 'VERIFIED': return <Badge variant="success">Đã xác minh</Badge>;
|
||||||
|
case 'PENDING': return <Badge variant="warning">Chờ duyệt</Badge>;
|
||||||
|
case 'REJECTED': return <Badge variant="destructive">Bị từ chối</Badge>;
|
||||||
|
default: return <Badge variant="secondary">{status}</Badge>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface KycData {
|
||||||
|
idType?: string;
|
||||||
|
idNumber?: string;
|
||||||
|
frontImageUrl?: string;
|
||||||
|
backImageUrl?: string;
|
||||||
|
selfieUrl?: string;
|
||||||
|
[key: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
function KycDetailView({ item, onApprove, onReject }: {
|
||||||
|
item: KycQueueItem;
|
||||||
|
onApprove: () => void;
|
||||||
|
onReject: () => void;
|
||||||
|
}) {
|
||||||
|
const kycData = item.kycData as KycData | null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold">{item.fullName}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">{item.phone}</p>
|
||||||
|
{item.email && (
|
||||||
|
<p className="text-sm text-muted-foreground">{item.email}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{kycStatusBadge(item.kycStatus)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="rounded-md border p-3">
|
||||||
|
<div className="text-xs text-muted-foreground">Vai trò</div>
|
||||||
|
<div className="mt-1 text-sm font-medium">{item.role}</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-md border p-3">
|
||||||
|
<div className="text-xs text-muted-foreground">Ngày gửi</div>
|
||||||
|
<div className="mt-1 text-sm font-medium">
|
||||||
|
{new Date(item.createdAt).toLocaleDateString('vi-VN')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{kycData && (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<h4 className="text-sm font-medium">Thông tin KYC</h4>
|
||||||
|
{kycData.idType && (
|
||||||
|
<div className="rounded-md border p-3">
|
||||||
|
<div className="text-xs text-muted-foreground">Loại giấy tờ</div>
|
||||||
|
<div className="mt-1 text-sm font-medium">{kycData.idType}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{kycData.idNumber && (
|
||||||
|
<div className="rounded-md border p-3">
|
||||||
|
<div className="text-xs text-muted-foreground">Số giấy tờ</div>
|
||||||
|
<div className="mt-1 text-sm font-medium">{kycData.idNumber}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid gap-2">
|
||||||
|
{kycData.frontImageUrl && (
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-xs text-muted-foreground">Mặt trước</div>
|
||||||
|
<div className="aspect-video overflow-hidden rounded-md border bg-muted">
|
||||||
|
<img
|
||||||
|
src={kycData.frontImageUrl}
|
||||||
|
alt="Mặt trước giấy tờ"
|
||||||
|
className="h-full w-full object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{kycData.backImageUrl && (
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-xs text-muted-foreground">Mặt sau</div>
|
||||||
|
<div className="aspect-video overflow-hidden rounded-md border bg-muted">
|
||||||
|
<img
|
||||||
|
src={kycData.backImageUrl}
|
||||||
|
alt="Mặt sau giấy tờ"
|
||||||
|
className="h-full w-full object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{kycData.selfieUrl && (
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-xs text-muted-foreground">Ảnh selfie</div>
|
||||||
|
<div className="aspect-video overflow-hidden rounded-md border bg-muted">
|
||||||
|
<img
|
||||||
|
src={kycData.selfieUrl}
|
||||||
|
alt="Selfie"
|
||||||
|
className="h-full w-full object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{item.kycStatus === 'PENDING' && (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button className="flex-1" onClick={onApprove}>
|
||||||
|
<CheckCircle className="mr-2 h-4 w-4" />
|
||||||
|
Duyệt KYC
|
||||||
|
</Button>
|
||||||
|
<Button variant="destructive" className="flex-1" onClick={onReject}>
|
||||||
|
<XCircle className="mr-2 h-4 w-4" />
|
||||||
|
Từ chối
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AdminKycPage() {
|
||||||
|
const { tokens } = useAuthStore();
|
||||||
|
const [result, setResult] = useState<PaginatedResult<KycQueueItem> | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
|
||||||
|
const [selectedItem, setSelectedItem] = useState<KycQueueItem | null>(null);
|
||||||
|
|
||||||
|
// Approve dialog
|
||||||
|
const [approveDialog, setApproveDialog] = useState<string | null>(null);
|
||||||
|
const [approveNotes, setApproveNotes] = useState('');
|
||||||
|
|
||||||
|
// Reject dialog
|
||||||
|
const [rejectDialog, setRejectDialog] = useState<string | null>(null);
|
||||||
|
const [rejectReason, setRejectReason] = useState('');
|
||||||
|
|
||||||
|
const [actionLoading, setActionLoading] = useState(false);
|
||||||
|
|
||||||
|
const fetchQueue = useCallback(async () => {
|
||||||
|
if (!tokens?.accessToken) return;
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const data = await adminApi.getKycQueue(tokens.accessToken, page, 20);
|
||||||
|
setResult(data);
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : 'Không thể tải hàng đợi KYC');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [tokens?.accessToken, page]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchQueue();
|
||||||
|
}, [fetchQueue]);
|
||||||
|
|
||||||
|
const handleApprove = async () => {
|
||||||
|
if (!tokens?.accessToken || !approveDialog) return;
|
||||||
|
setActionLoading(true);
|
||||||
|
try {
|
||||||
|
await adminApi.approveKyc(tokens.accessToken, approveDialog, approveNotes || undefined);
|
||||||
|
setApproveDialog(null);
|
||||||
|
setApproveNotes('');
|
||||||
|
setSelectedItem(null);
|
||||||
|
fetchQueue();
|
||||||
|
} catch {
|
||||||
|
// silently fail
|
||||||
|
} finally {
|
||||||
|
setActionLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReject = async () => {
|
||||||
|
if (!tokens?.accessToken || !rejectDialog || !rejectReason.trim()) return;
|
||||||
|
setActionLoading(true);
|
||||||
|
try {
|
||||||
|
await adminApi.rejectKyc(tokens.accessToken, rejectDialog, rejectReason);
|
||||||
|
setRejectDialog(null);
|
||||||
|
setRejectReason('');
|
||||||
|
setSelectedItem(null);
|
||||||
|
fetchQueue();
|
||||||
|
} catch {
|
||||||
|
// silently fail
|
||||||
|
} finally {
|
||||||
|
setActionLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold tracking-tight">Duyệt KYC</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Xác minh danh tính người dùng và đại lý
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" size="sm" onClick={fetchQueue}>
|
||||||
|
<RefreshCw className="mr-2 h-4 w-4" />
|
||||||
|
Làm mới
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-6 lg:grid-cols-[1fr_400px]">
|
||||||
|
{/* Table */}
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex h-48 items-center justify-center">
|
||||||
|
<RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="flex h-48 flex-col items-center justify-center gap-2">
|
||||||
|
<p className="text-sm text-destructive">{error}</p>
|
||||||
|
<Button variant="outline" size="sm" onClick={fetchQueue}>
|
||||||
|
Thử lại
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : !result || result.data.length === 0 ? (
|
||||||
|
<div className="flex h-48 flex-col items-center justify-center gap-2">
|
||||||
|
<ShieldCheck className="h-8 w-8 text-green-500" />
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Không có yêu cầu KYC nào đang chờ
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Họ tên</TableHead>
|
||||||
|
<TableHead className="hidden sm:table-cell">SĐT</TableHead>
|
||||||
|
<TableHead>Vai trò</TableHead>
|
||||||
|
<TableHead>Trạng thái</TableHead>
|
||||||
|
<TableHead className="hidden md:table-cell">Ngày gửi</TableHead>
|
||||||
|
<TableHead className="w-10"></TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{result.data.map((item) => (
|
||||||
|
<TableRow
|
||||||
|
key={item.userId}
|
||||||
|
className={`cursor-pointer ${selectedItem?.userId === item.userId ? 'bg-muted/50' : ''}`}
|
||||||
|
onClick={() => setSelectedItem(item)}
|
||||||
|
>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium">{item.fullName}</div>
|
||||||
|
{item.email && (
|
||||||
|
<div className="text-xs text-muted-foreground">{item.email}</div>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="hidden sm:table-cell">{item.phone}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline">{item.role}</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{kycStatusBadge(item.kycStatus)}</TableCell>
|
||||||
|
<TableCell className="hidden md:table-cell text-sm text-muted-foreground">
|
||||||
|
{new Date(item.createdAt).toLocaleDateString('vi-VN')}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<FileText className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
|
||||||
|
{result.totalPages > 1 && (
|
||||||
|
<div className="flex items-center justify-between border-t px-4 py-3">
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
Trang {result.page}/{result.totalPages} ({result.total} yêu cầu)
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
disabled={page <= 1}
|
||||||
|
onClick={() => setPage((p) => p - 1)}
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
disabled={page >= result.totalPages}
|
||||||
|
onClick={() => setPage((p) => p + 1)}
|
||||||
|
>
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Detail sidebar */}
|
||||||
|
<div className="hidden lg:block">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
{selectedItem ? (
|
||||||
|
<KycDetailView
|
||||||
|
item={selectedItem}
|
||||||
|
onApprove={() => {
|
||||||
|
setApproveDialog(selectedItem.userId);
|
||||||
|
setApproveNotes('');
|
||||||
|
}}
|
||||||
|
onReject={() => {
|
||||||
|
setRejectDialog(selectedItem.userId);
|
||||||
|
setRejectReason('');
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
|
||||||
|
Chọn yêu cầu KYC để xem chi tiết
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Approve dialog */}
|
||||||
|
<Dialog open={!!approveDialog} onOpenChange={() => setApproveDialog(null)}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Duyệt KYC</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Xác nhận danh tính người dùng đã được xác minh thành công.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<Input
|
||||||
|
placeholder="Ghi chú (không bắt buộc)..."
|
||||||
|
value={approveNotes}
|
||||||
|
onChange={(e) => setApproveNotes(e.target.value)}
|
||||||
|
/>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setApproveDialog(null)}>
|
||||||
|
Hủy
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleApprove} disabled={actionLoading}>
|
||||||
|
{actionLoading ? 'Đang xử lý...' : 'Xác nhận duyệt'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Reject dialog */}
|
||||||
|
<Dialog open={!!rejectDialog} onOpenChange={() => setRejectDialog(null)}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Từ chối KYC</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Vui lòng nhập lý do từ chối. Người dùng sẽ cần gửi lại hồ sơ.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<Input
|
||||||
|
placeholder="Lý do từ chối (bắt buộc)..."
|
||||||
|
value={rejectReason}
|
||||||
|
onChange={(e) => setRejectReason(e.target.value)}
|
||||||
|
/>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setRejectDialog(null)}>
|
||||||
|
Hủy
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
onClick={handleReject}
|
||||||
|
disabled={actionLoading || !rejectReason.trim()}
|
||||||
|
>
|
||||||
|
{actionLoading ? 'Đang xử lý...' : 'Từ chối KYC'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
421
apps/web/app/(admin)/admin/moderation/page.tsx
Normal file
421
apps/web/app/(admin)/admin/moderation/page.tsx
Normal file
@@ -0,0 +1,421 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState, useCallback } from 'react';
|
||||||
|
import {
|
||||||
|
CheckCircle,
|
||||||
|
XCircle,
|
||||||
|
RefreshCw,
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
AlertTriangle,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { useAuthStore } from '@/lib/auth-store';
|
||||||
|
import { adminApi, type ModerationQueueItem, type PaginatedResult } from '@/lib/admin-api';
|
||||||
|
|
||||||
|
function formatPrice(price: number): string {
|
||||||
|
if (price >= 1_000_000_000) {
|
||||||
|
return `${(price / 1_000_000_000).toFixed(1)} tỷ`;
|
||||||
|
}
|
||||||
|
if (price >= 1_000_000) {
|
||||||
|
return `${(price / 1_000_000).toFixed(0)} triệu`;
|
||||||
|
}
|
||||||
|
return price.toLocaleString('vi-VN');
|
||||||
|
}
|
||||||
|
|
||||||
|
function moderationScoreBadge(score: number | null) {
|
||||||
|
if (score === null) return <Badge variant="secondary">N/A</Badge>;
|
||||||
|
if (score >= 80) return <Badge variant="success">{score}</Badge>;
|
||||||
|
if (score >= 50) return <Badge variant="warning">{score}</Badge>;
|
||||||
|
return <Badge variant="destructive">{score}</Badge>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AdminModerationPage() {
|
||||||
|
const { tokens } = useAuthStore();
|
||||||
|
const [result, setResult] = useState<PaginatedResult<ModerationQueueItem> | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
|
||||||
|
// Selected items for bulk
|
||||||
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
// Action dialogs
|
||||||
|
const [approveDialog, setApproveDialog] = useState<string | null>(null);
|
||||||
|
const [rejectDialog, setRejectDialog] = useState<string | null>(null);
|
||||||
|
const [approveNotes, setApproveNotes] = useState('');
|
||||||
|
const [rejectReason, setRejectReason] = useState('');
|
||||||
|
const [actionLoading, setActionLoading] = useState(false);
|
||||||
|
|
||||||
|
// Bulk action
|
||||||
|
const [bulkAction, setBulkAction] = useState<'approve' | 'reject' | null>(null);
|
||||||
|
const [bulkReason, setBulkReason] = useState('');
|
||||||
|
|
||||||
|
const fetchQueue = useCallback(async () => {
|
||||||
|
if (!tokens?.accessToken) return;
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const data = await adminApi.getModerationQueue(tokens.accessToken, page, 20);
|
||||||
|
setResult(data);
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : 'Không thể tải hàng đợi');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [tokens?.accessToken, page]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchQueue();
|
||||||
|
}, [fetchQueue]);
|
||||||
|
|
||||||
|
const handleApprove = async () => {
|
||||||
|
if (!tokens?.accessToken || !approveDialog) return;
|
||||||
|
setActionLoading(true);
|
||||||
|
try {
|
||||||
|
await adminApi.approveListing(tokens.accessToken, approveDialog, approveNotes || undefined);
|
||||||
|
setApproveDialog(null);
|
||||||
|
setApproveNotes('');
|
||||||
|
fetchQueue();
|
||||||
|
} catch {
|
||||||
|
// silently fail
|
||||||
|
} finally {
|
||||||
|
setActionLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReject = async () => {
|
||||||
|
if (!tokens?.accessToken || !rejectDialog || !rejectReason.trim()) return;
|
||||||
|
setActionLoading(true);
|
||||||
|
try {
|
||||||
|
await adminApi.rejectListing(tokens.accessToken, rejectDialog, rejectReason);
|
||||||
|
setRejectDialog(null);
|
||||||
|
setRejectReason('');
|
||||||
|
fetchQueue();
|
||||||
|
} catch {
|
||||||
|
// silently fail
|
||||||
|
} finally {
|
||||||
|
setActionLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBulkAction = async () => {
|
||||||
|
if (!tokens?.accessToken || !bulkAction || selected.size === 0) return;
|
||||||
|
setActionLoading(true);
|
||||||
|
try {
|
||||||
|
await adminApi.bulkModerate(
|
||||||
|
tokens.accessToken,
|
||||||
|
Array.from(selected),
|
||||||
|
bulkAction,
|
||||||
|
bulkReason || undefined,
|
||||||
|
);
|
||||||
|
setSelected(new Set());
|
||||||
|
setBulkAction(null);
|
||||||
|
setBulkReason('');
|
||||||
|
fetchQueue();
|
||||||
|
} catch {
|
||||||
|
// silently fail
|
||||||
|
} finally {
|
||||||
|
setActionLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleSelect = (id: string) => {
|
||||||
|
setSelected((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(id)) next.delete(id);
|
||||||
|
else next.add(id);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleSelectAll = () => {
|
||||||
|
if (!result) return;
|
||||||
|
if (selected.size === result.data.length) {
|
||||||
|
setSelected(new Set());
|
||||||
|
} else {
|
||||||
|
setSelected(new Set(result.data.map((item) => item.listingId)));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold tracking-tight">Kiểm duyệt tin đăng</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Duyệt hoặc từ chối các tin đăng chờ phê duyệt
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{selected.size > 0 && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={() => { setBulkAction('approve'); setBulkReason(''); }}
|
||||||
|
>
|
||||||
|
<CheckCircle className="mr-2 h-4 w-4" />
|
||||||
|
Duyệt ({selected.size})
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="destructive"
|
||||||
|
onClick={() => { setBulkAction('reject'); setBulkReason(''); }}
|
||||||
|
>
|
||||||
|
<XCircle className="mr-2 h-4 w-4" />
|
||||||
|
Từ chối ({selected.size})
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Button variant="outline" size="sm" onClick={fetchQueue}>
|
||||||
|
<RefreshCw className="mr-2 h-4 w-4" />
|
||||||
|
Làm mới
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex h-48 items-center justify-center">
|
||||||
|
<RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="flex h-48 flex-col items-center justify-center gap-2">
|
||||||
|
<p className="text-sm text-destructive">{error}</p>
|
||||||
|
<Button variant="outline" size="sm" onClick={fetchQueue}>
|
||||||
|
Thử lại
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : !result || result.data.length === 0 ? (
|
||||||
|
<div className="flex h-48 flex-col items-center justify-center gap-2">
|
||||||
|
<CheckCircle className="h-8 w-8 text-green-500" />
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Không có tin nào chờ kiểm duyệt
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead className="w-10">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={selected.size === result.data.length && result.data.length > 0}
|
||||||
|
onChange={toggleSelectAll}
|
||||||
|
className="rounded border-input"
|
||||||
|
/>
|
||||||
|
</TableHead>
|
||||||
|
<TableHead>Tiêu đề</TableHead>
|
||||||
|
<TableHead className="hidden sm:table-cell">Loại</TableHead>
|
||||||
|
<TableHead className="hidden md:table-cell">Giá</TableHead>
|
||||||
|
<TableHead className="hidden lg:table-cell">Người đăng</TableHead>
|
||||||
|
<TableHead>Điểm AI</TableHead>
|
||||||
|
<TableHead className="hidden md:table-cell">Ngày đăng</TableHead>
|
||||||
|
<TableHead className="text-right">Hành động</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{result.data.map((item) => (
|
||||||
|
<TableRow key={item.listingId}>
|
||||||
|
<TableCell>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={selected.has(item.listingId)}
|
||||||
|
onChange={() => toggleSelect(item.listingId)}
|
||||||
|
className="rounded border-input"
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium max-w-[200px] truncate">
|
||||||
|
{item.propertyTitle}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
{item.transactionType === 'SALE' ? 'Bán' : 'Cho thuê'}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="hidden sm:table-cell">
|
||||||
|
<Badge variant="outline">{item.propertyType}</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="hidden md:table-cell">
|
||||||
|
{formatPrice(item.priceVND)} VND
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="hidden lg:table-cell">
|
||||||
|
<span className="text-sm">{item.sellerName}</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{moderationScoreBadge(item.moderationScore)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="hidden md:table-cell text-sm text-muted-foreground">
|
||||||
|
{new Date(item.createdAt).toLocaleDateString('vi-VN')}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex justify-end gap-1">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
title="Duyệt"
|
||||||
|
onClick={() => {
|
||||||
|
setApproveDialog(item.listingId);
|
||||||
|
setApproveNotes('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
title="Từ chối"
|
||||||
|
onClick={() => {
|
||||||
|
setRejectDialog(item.listingId);
|
||||||
|
setRejectReason('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<XCircle className="h-4 w-4 text-red-600" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
|
||||||
|
{result.totalPages > 1 && (
|
||||||
|
<div className="flex items-center justify-between border-t px-4 py-3">
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
Trang {result.page}/{result.totalPages} ({result.total} tin)
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
disabled={page <= 1}
|
||||||
|
onClick={() => setPage((p) => p - 1)}
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
disabled={page >= result.totalPages}
|
||||||
|
onClick={() => setPage((p) => p + 1)}
|
||||||
|
>
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Approve dialog */}
|
||||||
|
<Dialog open={!!approveDialog} onOpenChange={() => setApproveDialog(null)}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Duyệt tin đăng</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Tin đăng sẽ được hiển thị công khai sau khi duyệt.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<Input
|
||||||
|
placeholder="Ghi chú (không bắt buộc)..."
|
||||||
|
value={approveNotes}
|
||||||
|
onChange={(e) => setApproveNotes(e.target.value)}
|
||||||
|
/>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setApproveDialog(null)}>
|
||||||
|
Hủy
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleApprove} disabled={actionLoading}>
|
||||||
|
{actionLoading ? 'Đang xử lý...' : 'Duyệt tin'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Reject dialog */}
|
||||||
|
<Dialog open={!!rejectDialog} onOpenChange={() => setRejectDialog(null)}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Từ chối tin đăng</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Vui lòng nhập lý do từ chối. Người đăng sẽ nhận được thông báo.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<Input
|
||||||
|
placeholder="Lý do từ chối (bắt buộc)..."
|
||||||
|
value={rejectReason}
|
||||||
|
onChange={(e) => setRejectReason(e.target.value)}
|
||||||
|
/>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setRejectDialog(null)}>
|
||||||
|
Hủy
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
onClick={handleReject}
|
||||||
|
disabled={actionLoading || !rejectReason.trim()}
|
||||||
|
>
|
||||||
|
{actionLoading ? 'Đang xử lý...' : 'Từ chối'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Bulk action dialog */}
|
||||||
|
<Dialog open={!!bulkAction} onOpenChange={() => setBulkAction(null)}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{bulkAction === 'approve' ? 'Duyệt hàng loạt' : 'Từ chối hàng loạt'}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<AlertTriangle className="h-4 w-4" />
|
||||||
|
Thao tác sẽ áp dụng cho {selected.size} tin đăng đã chọn.
|
||||||
|
</span>
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
{bulkAction === 'reject' && (
|
||||||
|
<Input
|
||||||
|
placeholder="Lý do từ chối (bắt buộc)..."
|
||||||
|
value={bulkReason}
|
||||||
|
onChange={(e) => setBulkReason(e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setBulkAction(null)}>
|
||||||
|
Hủy
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={bulkAction === 'reject' ? 'destructive' : 'default'}
|
||||||
|
onClick={handleBulkAction}
|
||||||
|
disabled={actionLoading || (bulkAction === 'reject' && !bulkReason.trim())}
|
||||||
|
>
|
||||||
|
{actionLoading
|
||||||
|
? 'Đang xử lý...'
|
||||||
|
: bulkAction === 'approve'
|
||||||
|
? `Duyệt ${selected.size} tin`
|
||||||
|
: `Từ chối ${selected.size} tin`}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
226
apps/web/app/(admin)/admin/page.tsx
Normal file
226
apps/web/app/(admin)/admin/page.tsx
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState, useCallback } from 'react';
|
||||||
|
import {
|
||||||
|
Users,
|
||||||
|
Home,
|
||||||
|
ClipboardCheck,
|
||||||
|
Clock,
|
||||||
|
UserCheck,
|
||||||
|
ShieldCheck,
|
||||||
|
ArrowUpRight,
|
||||||
|
ArrowDownRight,
|
||||||
|
TrendingUp,
|
||||||
|
RefreshCw,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { useAuthStore } from '@/lib/auth-store';
|
||||||
|
import { adminApi, type DashboardStats, type RevenueStatsItem } from '@/lib/admin-api';
|
||||||
|
|
||||||
|
interface StatCardProps {
|
||||||
|
title: string;
|
||||||
|
value: number;
|
||||||
|
icon: React.ElementType;
|
||||||
|
description?: string;
|
||||||
|
trend?: 'up' | 'down';
|
||||||
|
trendValue?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatCard({ title, value, icon: Icon, description, trend, trendValue }: StatCardProps) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
||||||
|
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{value.toLocaleString('vi-VN')}</div>
|
||||||
|
{(description || trendValue) && (
|
||||||
|
<p className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
|
||||||
|
{trend === 'up' && <ArrowUpRight className="h-3 w-3 text-green-600" />}
|
||||||
|
{trend === 'down' && <ArrowDownRight className="h-3 w-3 text-red-600" />}
|
||||||
|
{trendValue && (
|
||||||
|
<span className={trend === 'up' ? 'text-green-600' : trend === 'down' ? 'text-red-600' : ''}>
|
||||||
|
{trendValue}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{description && <span>{description}</span>}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function RevenueChart({ data }: { data: RevenueStatsItem[] }) {
|
||||||
|
if (data.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
|
||||||
|
Chưa có dữ liệu doanh thu
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const maxRevenue = Math.max(...data.map((d) => d.totalRevenue), 1);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{data.map((item) => {
|
||||||
|
const pct = (item.totalRevenue / maxRevenue) * 100;
|
||||||
|
return (
|
||||||
|
<div key={item.period} className="space-y-1">
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-muted-foreground">{item.period}</span>
|
||||||
|
<span className="font-medium">
|
||||||
|
{item.totalRevenue.toLocaleString('vi-VN')} VND
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-2 w-full rounded-full bg-muted">
|
||||||
|
<div
|
||||||
|
className="h-2 rounded-full bg-primary transition-all"
|
||||||
|
style={{ width: `${pct}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3 text-xs text-muted-foreground">
|
||||||
|
<span>Subscription: {item.subscriptionRevenue.toLocaleString('vi-VN')}</span>
|
||||||
|
<span>Listing fee: {item.listingFeeRevenue.toLocaleString('vi-VN')}</span>
|
||||||
|
<span>{item.transactionCount} GD</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AdminDashboardPage() {
|
||||||
|
const { tokens } = useAuthStore();
|
||||||
|
const [stats, setStats] = useState<DashboardStats | null>(null);
|
||||||
|
const [revenue, setRevenue] = useState<RevenueStatsItem[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const fetchData = useCallback(async () => {
|
||||||
|
if (!tokens?.accessToken) return;
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const endDate = new Date().toISOString().split('T')[0]!;
|
||||||
|
const startDate = new Date(Date.now() - 180 * 86400000).toISOString().split('T')[0]!;
|
||||||
|
|
||||||
|
const [statsData, revenueData] = await Promise.all([
|
||||||
|
adminApi.getDashboardStats(tokens.accessToken),
|
||||||
|
adminApi.getRevenueStats(tokens.accessToken, startDate, endDate, 'month'),
|
||||||
|
]);
|
||||||
|
setStats(statsData);
|
||||||
|
setRevenue(revenueData);
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : 'Không thể tải dữ liệu');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [tokens?.accessToken]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchData();
|
||||||
|
}, [fetchData]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-64 items-center justify-center">
|
||||||
|
<RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-64 flex-col items-center justify-center gap-3">
|
||||||
|
<p className="text-sm text-destructive">{error}</p>
|
||||||
|
<Button variant="outline" size="sm" onClick={fetchData}>
|
||||||
|
Thử lại
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!stats) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Tổng quan hệ thống GoodGo
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" size="sm" onClick={fetchData}>
|
||||||
|
<RefreshCw className="mr-2 h-4 w-4" />
|
||||||
|
Làm mới
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats grid */}
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<StatCard
|
||||||
|
title="Tổng người dùng"
|
||||||
|
value={stats.totalUsers}
|
||||||
|
icon={Users}
|
||||||
|
trend="up"
|
||||||
|
trendValue={`+${stats.newUsersLast30Days}`}
|
||||||
|
description="trong 30 ngày"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="Tổng tin đăng"
|
||||||
|
value={stats.totalListings}
|
||||||
|
icon={Home}
|
||||||
|
trend="up"
|
||||||
|
trendValue={`+${stats.newListingsLast30Days}`}
|
||||||
|
description="trong 30 ngày"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="Tin đang hoạt động"
|
||||||
|
value={stats.activeListings}
|
||||||
|
icon={ClipboardCheck}
|
||||||
|
description="đang hiển thị"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="Chờ kiểm duyệt"
|
||||||
|
value={stats.pendingModerationCount}
|
||||||
|
icon={Clock}
|
||||||
|
description="tin đang chờ duyệt"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<StatCard
|
||||||
|
title="Tổng đại lý"
|
||||||
|
value={stats.totalAgents}
|
||||||
|
icon={UserCheck}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="Đại lý đã xác minh"
|
||||||
|
value={stats.verifiedAgents}
|
||||||
|
icon={ShieldCheck}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="Tổng giao dịch"
|
||||||
|
value={stats.totalTransactions}
|
||||||
|
icon={TrendingUp}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Revenue chart */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Doanh thu 6 tháng gần nhất</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<RevenueChart data={revenue} />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
473
apps/web/app/(admin)/admin/users/page.tsx
Normal file
473
apps/web/app/(admin)/admin/users/page.tsx
Normal file
@@ -0,0 +1,473 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState, useCallback } from 'react';
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
RefreshCw,
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
UserX,
|
||||||
|
UserCheck,
|
||||||
|
Eye,
|
||||||
|
X,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Select } from '@/components/ui/select';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { useAuthStore } from '@/lib/auth-store';
|
||||||
|
import {
|
||||||
|
adminApi,
|
||||||
|
type UserListItem,
|
||||||
|
type UserDetail,
|
||||||
|
type PaginatedResult,
|
||||||
|
} from '@/lib/admin-api';
|
||||||
|
|
||||||
|
function kycBadgeVariant(status: string) {
|
||||||
|
switch (status) {
|
||||||
|
case 'VERIFIED': return 'success' as const;
|
||||||
|
case 'PENDING': return 'warning' as const;
|
||||||
|
case 'REJECTED': return 'destructive' as const;
|
||||||
|
default: return 'secondary' as const;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function roleBadgeVariant(role: string) {
|
||||||
|
switch (role) {
|
||||||
|
case 'ADMIN': return 'default' as const;
|
||||||
|
case 'AGENT': return 'info' as const;
|
||||||
|
default: return 'secondary' as const;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function UserDetailPanel({
|
||||||
|
user,
|
||||||
|
onClose,
|
||||||
|
onToggleStatus,
|
||||||
|
}: {
|
||||||
|
user: UserDetail;
|
||||||
|
onClose: () => void;
|
||||||
|
onToggleStatus: (userId: string, isActive: boolean) => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold">{user.fullName}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">{user.phone}</p>
|
||||||
|
{user.email && (
|
||||||
|
<p className="text-sm text-muted-foreground">{user.email}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<button onClick={onClose}>
|
||||||
|
<X className="h-5 w-5 text-muted-foreground" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="rounded-md border p-3">
|
||||||
|
<div className="text-xs text-muted-foreground">Vai trò</div>
|
||||||
|
<Badge variant={roleBadgeVariant(user.role)} className="mt-1">{user.role}</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-md border p-3">
|
||||||
|
<div className="text-xs text-muted-foreground">KYC</div>
|
||||||
|
<Badge variant={kycBadgeVariant(user.kycStatus)} className="mt-1">{user.kycStatus}</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-md border p-3">
|
||||||
|
<div className="text-xs text-muted-foreground">Trạng thái</div>
|
||||||
|
<Badge variant={user.isActive ? 'success' : 'destructive'} className="mt-1">
|
||||||
|
{user.isActive ? 'Hoạt động' : 'Bị khóa'}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-md border p-3">
|
||||||
|
<div className="text-xs text-muted-foreground">Ngày tạo</div>
|
||||||
|
<div className="mt-1 text-sm font-medium">
|
||||||
|
{new Date(user.createdAt).toLocaleDateString('vi-VN')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
<div className="rounded-md border p-3 text-center">
|
||||||
|
<div className="text-2xl font-bold">{user.listingsCount}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">Tin đăng</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-md border p-3 text-center">
|
||||||
|
<div className="text-2xl font-bold">{user.activeListingsCount}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">Đang hiển thị</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-md border p-3 text-center">
|
||||||
|
<div className="text-2xl font-bold">{user.transactionsCount}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">Giao dịch</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{user.subscription && (
|
||||||
|
<div className="rounded-md border p-3">
|
||||||
|
<div className="text-xs text-muted-foreground mb-1">Gói đăng ký</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge variant="info">{user.subscription.planTier}</Badge>
|
||||||
|
<Badge variant={user.subscription.status === 'active' ? 'success' : 'warning'}>
|
||||||
|
{user.subscription.status}
|
||||||
|
</Badge>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
đến {new Date(user.subscription.currentPeriodEnd).toLocaleDateString('vi-VN')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{user.recentActivity.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-medium mb-2">Hoạt động gần đây</h4>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{user.recentActivity.slice(0, 5).map((activity, i) => (
|
||||||
|
<div key={i} className="flex items-start gap-2 text-sm">
|
||||||
|
<div className="mt-0.5 h-2 w-2 rounded-full bg-muted-foreground flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<span>{activity.description}</span>
|
||||||
|
<span className="ml-2 text-xs text-muted-foreground">
|
||||||
|
{new Date(activity.createdAt).toLocaleDateString('vi-VN')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant={user.isActive ? 'destructive' : 'default'}
|
||||||
|
size="sm"
|
||||||
|
className="flex-1"
|
||||||
|
onClick={() => onToggleStatus(user.id, !user.isActive)}
|
||||||
|
>
|
||||||
|
{user.isActive ? (
|
||||||
|
<>
|
||||||
|
<UserX className="mr-2 h-4 w-4" /> Khóa tài khoản
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<UserCheck className="mr-2 h-4 w-4" /> Mở khóa
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AdminUsersPage() {
|
||||||
|
const { tokens } = useAuthStore();
|
||||||
|
const [result, setResult] = useState<PaginatedResult<UserListItem> | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [roleFilter, setRoleFilter] = useState('');
|
||||||
|
const [statusFilter, setStatusFilter] = useState('');
|
||||||
|
|
||||||
|
// Detail panel
|
||||||
|
const [selectedUser, setSelectedUser] = useState<UserDetail | null>(null);
|
||||||
|
const [detailLoading, setDetailLoading] = useState(false);
|
||||||
|
|
||||||
|
// Ban dialog
|
||||||
|
const [banDialog, setBanDialog] = useState<{ userId: string; isActive: boolean } | null>(null);
|
||||||
|
const [banReason, setBanReason] = useState('');
|
||||||
|
const [actionLoading, setActionLoading] = useState(false);
|
||||||
|
|
||||||
|
const fetchUsers = useCallback(async () => {
|
||||||
|
if (!tokens?.accessToken) return;
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const data = await adminApi.getUsers(tokens.accessToken, {
|
||||||
|
page,
|
||||||
|
limit: 20,
|
||||||
|
role: roleFilter || undefined,
|
||||||
|
isActive: statusFilter === '' ? undefined : statusFilter === 'active',
|
||||||
|
search: search || undefined,
|
||||||
|
});
|
||||||
|
setResult(data);
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : 'Không thể tải danh sách');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [tokens?.accessToken, page, roleFilter, statusFilter, search]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchUsers();
|
||||||
|
}, [fetchUsers]);
|
||||||
|
|
||||||
|
const openDetail = async (userId: string) => {
|
||||||
|
if (!tokens?.accessToken) return;
|
||||||
|
setDetailLoading(true);
|
||||||
|
try {
|
||||||
|
const detail = await adminApi.getUserDetail(tokens.accessToken, userId);
|
||||||
|
setSelectedUser(detail);
|
||||||
|
} catch {
|
||||||
|
// silently fail
|
||||||
|
} finally {
|
||||||
|
setDetailLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggleStatus = (userId: string, newActive: boolean) => {
|
||||||
|
setBanDialog({ userId, isActive: newActive });
|
||||||
|
setBanReason('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmToggleStatus = async () => {
|
||||||
|
if (!tokens?.accessToken || !banDialog) return;
|
||||||
|
setActionLoading(true);
|
||||||
|
try {
|
||||||
|
await adminApi.banUser(
|
||||||
|
tokens.accessToken,
|
||||||
|
banDialog.userId,
|
||||||
|
banReason || 'Admin action',
|
||||||
|
banDialog.isActive, // unban = true if making active
|
||||||
|
);
|
||||||
|
setBanDialog(null);
|
||||||
|
setSelectedUser(null);
|
||||||
|
fetchUsers();
|
||||||
|
} catch {
|
||||||
|
// silently fail
|
||||||
|
} finally {
|
||||||
|
setActionLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setPage(1);
|
||||||
|
fetchUsers();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold tracking-tight">Quản lý người dùng</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Danh sách và quản lý tài khoản người dùng
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-end">
|
||||||
|
<form onSubmit={handleSearch} className="flex flex-1 gap-2">
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
placeholder="Tìm theo tên, SĐT, email..."
|
||||||
|
value={search}
|
||||||
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
|
className="pl-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" size="sm">
|
||||||
|
Tìm
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
value={roleFilter}
|
||||||
|
onChange={(e) => { setRoleFilter(e.target.value); setPage(1); }}
|
||||||
|
className="w-40"
|
||||||
|
>
|
||||||
|
<option value="">Tất cả vai trò</option>
|
||||||
|
<option value="USER">Người dùng</option>
|
||||||
|
<option value="AGENT">Đại lý</option>
|
||||||
|
<option value="ADMIN">Admin</option>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
value={statusFilter}
|
||||||
|
onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
|
||||||
|
className="w-40"
|
||||||
|
>
|
||||||
|
<option value="">Tất cả trạng thái</option>
|
||||||
|
<option value="active">Hoạt động</option>
|
||||||
|
<option value="inactive">Bị khóa</option>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-6 lg:grid-cols-[1fr_380px]">
|
||||||
|
{/* Table */}
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex h-48 items-center justify-center">
|
||||||
|
<RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="flex h-48 flex-col items-center justify-center gap-2">
|
||||||
|
<p className="text-sm text-destructive">{error}</p>
|
||||||
|
<Button variant="outline" size="sm" onClick={fetchUsers}>
|
||||||
|
Thử lại
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : !result || result.data.length === 0 ? (
|
||||||
|
<div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
|
||||||
|
Không tìm thấy người dùng nào
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Họ tên</TableHead>
|
||||||
|
<TableHead className="hidden sm:table-cell">SĐT</TableHead>
|
||||||
|
<TableHead>Vai trò</TableHead>
|
||||||
|
<TableHead>KYC</TableHead>
|
||||||
|
<TableHead className="hidden md:table-cell">Trạng thái</TableHead>
|
||||||
|
<TableHead className="w-10"></TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{result.data.map((user) => (
|
||||||
|
<TableRow
|
||||||
|
key={user.id}
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={() => openDetail(user.id)}
|
||||||
|
>
|
||||||
|
<TableCell>
|
||||||
|
<div className="font-medium">{user.fullName}</div>
|
||||||
|
{user.email && (
|
||||||
|
<div className="text-xs text-muted-foreground">{user.email}</div>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="hidden sm:table-cell">{user.phone}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant={roleBadgeVariant(user.role)}>{user.role}</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant={kycBadgeVariant(user.kycStatus)}>{user.kycStatus}</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="hidden md:table-cell">
|
||||||
|
<Badge variant={user.isActive ? 'success' : 'destructive'}>
|
||||||
|
{user.isActive ? 'Hoạt động' : 'Bị khóa'}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Eye className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
{result.totalPages > 1 && (
|
||||||
|
<div className="flex items-center justify-between border-t px-4 py-3">
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
Trang {result.page}/{result.totalPages} ({result.total} người dùng)
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
disabled={page <= 1}
|
||||||
|
onClick={() => setPage((p) => p - 1)}
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
disabled={page >= result.totalPages}
|
||||||
|
onClick={() => setPage((p) => p + 1)}
|
||||||
|
>
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Detail sidebar */}
|
||||||
|
<div className="hidden lg:block">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
{detailLoading ? (
|
||||||
|
<div className="flex h-48 items-center justify-center">
|
||||||
|
<RefreshCw className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
) : selectedUser ? (
|
||||||
|
<UserDetailPanel
|
||||||
|
user={selectedUser}
|
||||||
|
onClose={() => setSelectedUser(null)}
|
||||||
|
onToggleStatus={handleToggleStatus}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
|
||||||
|
Chọn người dùng để xem chi tiết
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile detail dialog */}
|
||||||
|
<Dialog open={!!selectedUser && typeof window !== 'undefined' && window.innerWidth < 1024} onOpenChange={() => setSelectedUser(null)}>
|
||||||
|
<DialogContent>
|
||||||
|
{selectedUser && (
|
||||||
|
<UserDetailPanel
|
||||||
|
user={selectedUser}
|
||||||
|
onClose={() => setSelectedUser(null)}
|
||||||
|
onToggleStatus={handleToggleStatus}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Ban/unban confirmation */}
|
||||||
|
<Dialog open={!!banDialog} onOpenChange={() => setBanDialog(null)}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{banDialog?.isActive ? 'Mở khóa tài khoản' : 'Khóa tài khoản'}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
{banDialog?.isActive
|
||||||
|
? 'Người dùng sẽ có thể đăng nhập và sử dụng hệ thống.'
|
||||||
|
: 'Người dùng sẽ không thể đăng nhập và các tin đăng sẽ bị ẩn.'}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<Input
|
||||||
|
placeholder="Lý do..."
|
||||||
|
value={banReason}
|
||||||
|
onChange={(e) => setBanReason(e.target.value)}
|
||||||
|
/>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setBanDialog(null)}>
|
||||||
|
Hủy
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={banDialog?.isActive ? 'default' : 'destructive'}
|
||||||
|
onClick={confirmToggleStatus}
|
||||||
|
disabled={actionLoading}
|
||||||
|
>
|
||||||
|
{actionLoading ? 'Đang xử lý...' : 'Xác nhận'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
138
apps/web/app/(admin)/layout.tsx
Normal file
138
apps/web/app/(admin)/layout.tsx
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { usePathname, useRouter } from 'next/navigation';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
LayoutDashboard,
|
||||||
|
Users,
|
||||||
|
ClipboardList,
|
||||||
|
ShieldCheck,
|
||||||
|
LogOut,
|
||||||
|
Menu,
|
||||||
|
X,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { useAuthStore } from '@/lib/auth-store';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
|
const adminNavItems = [
|
||||||
|
{ href: '/admin', label: 'Dashboard', icon: LayoutDashboard },
|
||||||
|
{ href: '/admin/users', label: 'Qu\u1EA3n l\u00FD ng\u01B0\u1EDDi d\u00F9ng', icon: Users },
|
||||||
|
{ href: '/admin/moderation', label: 'Ki\u1EC3m duy\u1EC7t tin', icon: ClipboardList },
|
||||||
|
{ href: '/admin/kyc', label: 'Duy\u1EC7t KYC', icon: ShieldCheck },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function AdminLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const router = useRouter();
|
||||||
|
const { user, logout } = useAuthStore();
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (user && user.role !== 'ADMIN') {
|
||||||
|
router.replace('/dashboard');
|
||||||
|
}
|
||||||
|
}, [user, router]);
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen items-center justify-center">
|
||||||
|
<div className="text-muted-foreground">Đang tải...</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (user.role !== 'ADMIN') {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen bg-background">
|
||||||
|
{/* Mobile overlay */}
|
||||||
|
{sidebarOpen && (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 z-40 bg-black/50 lg:hidden"
|
||||||
|
onClick={() => setSidebarOpen(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<aside
|
||||||
|
className={cn(
|
||||||
|
'fixed inset-y-0 left-0 z-50 w-64 border-r bg-card transition-transform lg:static lg:translate-x-0',
|
||||||
|
sidebarOpen ? 'translate-x-0' : '-translate-x-full',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex h-14 items-center border-b px-4">
|
||||||
|
<Link href="/admin" className="flex items-center gap-2">
|
||||||
|
<span className="text-lg font-bold text-primary">GoodGo</span>
|
||||||
|
<span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs font-semibold text-primary">
|
||||||
|
Admin
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
className="ml-auto lg:hidden"
|
||||||
|
onClick={() => setSidebarOpen(false)}
|
||||||
|
>
|
||||||
|
<X className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="flex flex-col gap-1 p-3">
|
||||||
|
{adminNavItems.map((item) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
const isActive =
|
||||||
|
item.href === '/admin'
|
||||||
|
? pathname === '/admin'
|
||||||
|
: pathname.startsWith(item.href);
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.href}
|
||||||
|
href={item.href}
|
||||||
|
onClick={() => setSidebarOpen(false)}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
|
||||||
|
isActive
|
||||||
|
? 'bg-primary/10 text-primary'
|
||||||
|
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon className="h-4 w-4" />
|
||||||
|
{item.label}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="mt-auto border-t p-3">
|
||||||
|
<div className="mb-2 px-3 text-xs text-muted-foreground truncate">
|
||||||
|
{user.fullName}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="w-full justify-start gap-2"
|
||||||
|
onClick={logout}
|
||||||
|
>
|
||||||
|
<LogOut className="h-4 w-4" />
|
||||||
|
Đăng xuất
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<div className="flex flex-1 flex-col">
|
||||||
|
<header className="sticky top-0 z-30 flex h-14 items-center border-b bg-background/95 px-4 backdrop-blur lg:hidden">
|
||||||
|
<button onClick={() => setSidebarOpen(true)}>
|
||||||
|
<Menu className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
<span className="ml-3 text-sm font-semibold">GoodGo Admin</span>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="flex-1 p-4 md:p-6">{children}</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
84
apps/web/components/ui/dialog.tsx
Normal file
84
apps/web/components/ui/dialog.tsx
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
interface DialogProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Dialog({ open, onOpenChange, children }: DialogProps) {
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
} else {
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
};
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
if (!open) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50">
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black/80 animate-in fade-in-0"
|
||||||
|
onClick={() => onOpenChange(false)}
|
||||||
|
/>
|
||||||
|
<div className="fixed inset-0 flex items-center justify-center p-4">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const DialogContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'relative z-50 w-full max-w-lg rounded-lg border bg-background p-6 shadow-lg animate-in fade-in-0 zoom-in-95',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
DialogContent.displayName = 'DialogContent';
|
||||||
|
|
||||||
|
function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||||
|
return (
|
||||||
|
<div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
|
||||||
|
return (
|
||||||
|
<h2 className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
|
||||||
|
return (
|
||||||
|
<p className={cn('text-sm text-muted-foreground', className)} {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 mt-4', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter };
|
||||||
74
apps/web/components/ui/table.tsx
Normal file
74
apps/web/components/ui/table.tsx
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
|
||||||
|
({ className, ...props }, ref) => (
|
||||||
|
<div className="relative w-full overflow-auto">
|
||||||
|
<table
|
||||||
|
ref={ref}
|
||||||
|
className={cn('w-full caption-bottom text-sm', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
);
|
||||||
|
Table.displayName = 'Table';
|
||||||
|
|
||||||
|
const TableHeader = React.forwardRef<
|
||||||
|
HTMLTableSectionElement,
|
||||||
|
React.HTMLAttributes<HTMLTableSectionElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
|
||||||
|
));
|
||||||
|
TableHeader.displayName = 'TableHeader';
|
||||||
|
|
||||||
|
const TableBody = React.forwardRef<
|
||||||
|
HTMLTableSectionElement,
|
||||||
|
React.HTMLAttributes<HTMLTableSectionElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
|
||||||
|
));
|
||||||
|
TableBody.displayName = 'TableBody';
|
||||||
|
|
||||||
|
const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
|
||||||
|
({ className, ...props }, ref) => (
|
||||||
|
<tr
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
);
|
||||||
|
TableRow.displayName = 'TableRow';
|
||||||
|
|
||||||
|
const TableHead = React.forwardRef<
|
||||||
|
HTMLTableCellElement,
|
||||||
|
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<th
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
TableHead.displayName = 'TableHead';
|
||||||
|
|
||||||
|
const TableCell = React.forwardRef<
|
||||||
|
HTMLTableCellElement,
|
||||||
|
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<td
|
||||||
|
ref={ref}
|
||||||
|
className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
TableCell.displayName = 'TableCell';
|
||||||
|
|
||||||
|
export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };
|
||||||
183
apps/web/lib/admin-api.ts
Normal file
183
apps/web/lib/admin-api.ts
Normal file
@@ -0,0 +1,183 @@
|
|||||||
|
import { apiClient } from './api-client';
|
||||||
|
|
||||||
|
// ── Types ──
|
||||||
|
|
||||||
|
export interface DashboardStats {
|
||||||
|
totalUsers: number;
|
||||||
|
totalListings: number;
|
||||||
|
activeListings: number;
|
||||||
|
pendingModerationCount: number;
|
||||||
|
totalAgents: number;
|
||||||
|
verifiedAgents: number;
|
||||||
|
totalTransactions: number;
|
||||||
|
newUsersLast30Days: number;
|
||||||
|
newListingsLast30Days: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RevenueStatsItem {
|
||||||
|
period: string;
|
||||||
|
totalRevenue: number;
|
||||||
|
subscriptionRevenue: number;
|
||||||
|
listingFeeRevenue: number;
|
||||||
|
featuredListingRevenue: number;
|
||||||
|
transactionCount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ModerationQueueItem {
|
||||||
|
listingId: string;
|
||||||
|
propertyTitle: string;
|
||||||
|
propertyType: string;
|
||||||
|
transactionType: string;
|
||||||
|
priceVND: number;
|
||||||
|
sellerName: string;
|
||||||
|
sellerId: string;
|
||||||
|
moderationScore: number | null;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PaginatedResult<T> {
|
||||||
|
data: T[];
|
||||||
|
total: number;
|
||||||
|
page: number;
|
||||||
|
limit: number;
|
||||||
|
totalPages: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserListItem {
|
||||||
|
id: string;
|
||||||
|
email: string | null;
|
||||||
|
phone: string;
|
||||||
|
fullName: string;
|
||||||
|
role: string;
|
||||||
|
kycStatus: string;
|
||||||
|
isActive: boolean;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserDetail {
|
||||||
|
id: string;
|
||||||
|
email: string | null;
|
||||||
|
phone: string;
|
||||||
|
fullName: string;
|
||||||
|
avatarUrl: string | null;
|
||||||
|
role: string;
|
||||||
|
kycStatus: string;
|
||||||
|
kycData: unknown;
|
||||||
|
isActive: boolean;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
listingsCount: number;
|
||||||
|
activeListingsCount: number;
|
||||||
|
transactionsCount: number;
|
||||||
|
subscription: {
|
||||||
|
planTier: string;
|
||||||
|
status: string;
|
||||||
|
currentPeriodEnd: string;
|
||||||
|
} | null;
|
||||||
|
recentActivity: Array<{
|
||||||
|
type: string;
|
||||||
|
description: string;
|
||||||
|
createdAt: string;
|
||||||
|
}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface KycQueueItem {
|
||||||
|
userId: string;
|
||||||
|
fullName: string;
|
||||||
|
email: string | null;
|
||||||
|
phone: string;
|
||||||
|
role: string;
|
||||||
|
kycStatus: string;
|
||||||
|
kycData: unknown;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── API ──
|
||||||
|
|
||||||
|
export const adminApi = {
|
||||||
|
// Dashboard
|
||||||
|
getDashboardStats: (token: string) =>
|
||||||
|
apiClient.authGet<DashboardStats>('/admin/dashboard', token),
|
||||||
|
|
||||||
|
getRevenueStats: (token: string, startDate: string, endDate: string, groupBy: 'day' | 'month' = 'month') =>
|
||||||
|
apiClient.authGet<RevenueStatsItem[]>(
|
||||||
|
`/admin/revenue?startDate=${startDate}&endDate=${endDate}&groupBy=${groupBy}`,
|
||||||
|
token,
|
||||||
|
),
|
||||||
|
|
||||||
|
// Moderation
|
||||||
|
getModerationQueue: (token: string, page = 1, limit = 20) =>
|
||||||
|
apiClient.authGet<PaginatedResult<ModerationQueueItem>>(
|
||||||
|
`/admin/moderation?page=${page}&limit=${limit}`,
|
||||||
|
token,
|
||||||
|
),
|
||||||
|
|
||||||
|
approveListing: (token: string, listingId: string, moderationNotes?: string) =>
|
||||||
|
apiClient.authPost<{ success: boolean }>('/admin/moderation/approve', token, {
|
||||||
|
listingId,
|
||||||
|
moderationNotes,
|
||||||
|
}),
|
||||||
|
|
||||||
|
rejectListing: (token: string, listingId: string, reason: string) =>
|
||||||
|
apiClient.authPost<{ success: boolean }>('/admin/moderation/reject', token, {
|
||||||
|
listingId,
|
||||||
|
reason,
|
||||||
|
}),
|
||||||
|
|
||||||
|
bulkModerate: (token: string, listingIds: string[], action: 'approve' | 'reject', reason?: string) =>
|
||||||
|
apiClient.authPost<{ success: boolean }>('/admin/moderation/bulk', token, {
|
||||||
|
listingIds,
|
||||||
|
action,
|
||||||
|
reason,
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Users
|
||||||
|
getUsers: (token: string, params: { page?: number; limit?: number; role?: string; isActive?: boolean; search?: string } = {}) => {
|
||||||
|
const query = new URLSearchParams();
|
||||||
|
if (params.page) query.set('page', String(params.page));
|
||||||
|
if (params.limit) query.set('limit', String(params.limit));
|
||||||
|
if (params.role) query.set('role', params.role);
|
||||||
|
if (params.isActive !== undefined) query.set('isActive', String(params.isActive));
|
||||||
|
if (params.search) query.set('search', params.search);
|
||||||
|
return apiClient.authGet<PaginatedResult<UserListItem>>(
|
||||||
|
`/admin/users?${query.toString()}`,
|
||||||
|
token,
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
getUserDetail: (token: string, userId: string) =>
|
||||||
|
apiClient.authGet<UserDetail>(`/admin/users/${userId}`, token),
|
||||||
|
|
||||||
|
updateUserStatus: (token: string, userId: string, isActive: boolean, reason?: string) =>
|
||||||
|
apiClient.authPost<{ success: boolean }>('/admin/users/status', token, {
|
||||||
|
userId,
|
||||||
|
isActive,
|
||||||
|
reason,
|
||||||
|
}),
|
||||||
|
|
||||||
|
banUser: (token: string, userId: string, reason: string, unban = false) =>
|
||||||
|
apiClient.authPost<{ success: boolean }>('/admin/users/ban', token, {
|
||||||
|
userId,
|
||||||
|
reason,
|
||||||
|
unban,
|
||||||
|
}),
|
||||||
|
|
||||||
|
// KYC
|
||||||
|
getKycQueue: (token: string, page = 1, limit = 20) =>
|
||||||
|
apiClient.authGet<PaginatedResult<KycQueueItem>>(
|
||||||
|
`/admin/kyc?page=${page}&limit=${limit}`,
|
||||||
|
token,
|
||||||
|
),
|
||||||
|
|
||||||
|
approveKyc: (token: string, userId: string, notes?: string) =>
|
||||||
|
apiClient.authPost<{ success: boolean }>('/admin/kyc/approve', token, {
|
||||||
|
userId,
|
||||||
|
notes,
|
||||||
|
}),
|
||||||
|
|
||||||
|
rejectKyc: (token: string, userId: string, reason: string) =>
|
||||||
|
apiClient.authPost<{ success: boolean }>('/admin/kyc/reject', token, {
|
||||||
|
userId,
|
||||||
|
reason,
|
||||||
|
}),
|
||||||
|
};
|
||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user