feat(listings): add user-facing scam/abuse report flow (GOO-19)
- Add ListingFlag model with FlagReason enum (SCAM, DUPLICATE, WRONG_INFO, ALREADY_SOLD, INAPPROPRIATE) - Add POST /listings/:id/report endpoint with rate limiting and duplicate prevention - Auto-flag listings with ≥3 reports to PENDING_REVIEW for moderator review - Add GET /admin/flagged-listings endpoint for admin moderation queue - Add "Báo cáo" button + modal on listing detail page (Vietnamese UI) - Add Prisma migration for listing_flags table with unique constraint per user/listing Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
@@ -9,6 +9,7 @@ import { ImageGallery } from '@/components/listings/image-gallery';
|
||||
import { InquiryModal } from '@/components/listings/inquiry-modal';
|
||||
import { PriceHistoryChart } from '@/components/listings/price-history-chart';
|
||||
import { SocialShare } from '@/components/listings/social-share';
|
||||
import { ReportListingModal } from '@/components/listings/report-listing-modal';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
@@ -399,6 +400,7 @@ export function ListingDetailClient({ listing }: ListingDetailClientProps) {
|
||||
const propertyTypeLabel = getLabel(PROPERTY_TYPES, property.propertyType);
|
||||
|
||||
const [inquiryOpen, setInquiryOpen] = React.useState(false);
|
||||
const [reportOpen, setReportOpen] = React.useState(false);
|
||||
const [neighborhoodScore, setNeighborhoodScore] = React.useState<NeighborhoodScoreResult | null>(null);
|
||||
const [priceHistory, setPriceHistory] = React.useState<PriceHistoryItem[]>([]);
|
||||
const [comps, setComps] = React.useState<ListingSimilarItem[]>([]);
|
||||
@@ -651,7 +653,18 @@ export function ListingDetailClient({ listing }: ListingDetailClientProps) {
|
||||
/>
|
||||
<InfoItem label="Hướng" value={getLabel(DIRECTIONS, property.direction) || '---'} />
|
||||
<InfoItem label="Năm xây" value={property.yearBuilt ? `${property.yearBuilt}` : '---'} />
|
||||
<InfoItem label="Pháp lý" value={property.legalStatus || '---'} />
|
||||
<InfoItem label="Pháp lý" value={
|
||||
(() => {
|
||||
const labels: Record<string, string> = {
|
||||
SO_DO: 'Sổ đỏ', SO_HONG: 'Sổ hồng',
|
||||
LAND_USE_RIGHT: 'Quyền sử dụng đất', JOINT_USE_RIGHT: 'Sở hữu chung',
|
||||
AWAITING: 'Đang chờ sổ', NO_CERTIFICATE: 'Chưa có giấy tờ',
|
||||
};
|
||||
const label = property.legalStatus ? (labels[property.legalStatus] ?? property.legalStatus) : '---';
|
||||
const badge = property.certificateVerified ? ' ✅ Đã xác minh' : '';
|
||||
return label + badge;
|
||||
})()
|
||||
} />
|
||||
<InfoItem label="Dự án" value={property.projectName || '---'} />
|
||||
<InfoItem
|
||||
label="Cách metro gần nhất"
|
||||
@@ -867,6 +880,24 @@ export function ListingDetailClient({ listing }: ListingDetailClientProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Report */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full gap-2 text-muted-foreground hover:text-destructive"
|
||||
onClick={() => setReportOpen(true)}
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
|
||||
</svg>
|
||||
Báo cáo tin đăng
|
||||
</Button>
|
||||
<ReportListingModal
|
||||
listingId={listing.id}
|
||||
open={reportOpen}
|
||||
onOpenChange={setReportOpen}
|
||||
/>
|
||||
|
||||
{/* Stats */}
|
||||
<Card>
|
||||
<CardContent className="pt-5">
|
||||
|
||||
139
apps/web/components/listings/report-listing-modal.tsx
Normal file
139
apps/web/components/listings/report-listing-modal.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { type FlagReason, listingsApi } from '@/lib/listings-api';
|
||||
|
||||
const FLAG_REASONS: { value: FlagReason; label: string }[] = [
|
||||
{ value: 'SCAM', label: 'Lừa đảo / Scam' },
|
||||
{ value: 'DUPLICATE', label: 'Tin trùng lặp' },
|
||||
{ value: 'WRONG_INFO', label: 'Thông tin sai lệch' },
|
||||
{ value: 'ALREADY_SOLD', label: 'Đã bán / Cho thuê rồi' },
|
||||
{ value: 'INAPPROPRIATE', label: 'Nội dung không phù hợp' },
|
||||
];
|
||||
|
||||
interface ReportListingModalProps {
|
||||
listingId: string;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function ReportListingModal({ listingId, open, onOpenChange }: ReportListingModalProps) {
|
||||
const [reason, setReason] = React.useState<FlagReason | ''>('');
|
||||
const [description, setDescription] = React.useState('');
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [success, setSuccess] = React.useState(false);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!reason) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await listingsApi.reportListing(listingId, reason, description || undefined);
|
||||
setSuccess(true);
|
||||
setTimeout(() => {
|
||||
onOpenChange(false);
|
||||
setSuccess(false);
|
||||
setReason('');
|
||||
setDescription('');
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Không thể gửi báo cáo');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Báo cáo tin đăng</DialogTitle>
|
||||
<DialogDescription>
|
||||
Chọn lý do báo cáo. Chúng tôi sẽ xem xét và xử lý trong thời gian sớm nhất.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{success ? (
|
||||
<div className="py-6 text-center">
|
||||
<div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
|
||||
<svg className="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="font-medium text-green-700">Báo cáo thành công!</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">Cảm ơn bạn đã giúp cộng đồng.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-4 py-2">
|
||||
<div className="space-y-2">
|
||||
<Label>Lý do báo cáo *</Label>
|
||||
<div className="space-y-2">
|
||||
{FLAG_REASONS.map((opt) => (
|
||||
<label
|
||||
key={opt.value}
|
||||
className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors hover:bg-muted/50 ${
|
||||
reason === opt.value ? 'border-primary bg-primary/5' : ''
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="flag-reason"
|
||||
value={opt.value}
|
||||
checked={reason === opt.value}
|
||||
onChange={() => setReason(opt.value)}
|
||||
className="h-4 w-4 text-primary"
|
||||
/>
|
||||
<span className="text-sm">{opt.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="report-desc">Mô tả chi tiết (tuỳ chọn)</Label>
|
||||
<Textarea
|
||||
id="report-desc"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Nhập thông tin chi tiết về vấn đề bạn gặp..."
|
||||
maxLength={1000}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
|
||||
Huỷ
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={!reason || loading}
|
||||
variant="destructive"
|
||||
>
|
||||
{loading ? 'Đang gửi...' : 'Gửi báo cáo'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -25,6 +25,16 @@ export type Direction =
|
||||
|
||||
export type Furnishing = 'FULLY_FURNISHED' | 'BASIC_FURNISHED' | 'UNFURNISHED';
|
||||
export type PropertyCondition = 'NEW' | 'LIKE_NEW' | 'RENOVATED' | 'USED';
|
||||
export type LegalStatus = 'SO_DO' | 'SO_HONG' | 'LAND_USE_RIGHT' | 'JOINT_USE_RIGHT' | 'AWAITING' | 'NO_CERTIFICATE';
|
||||
|
||||
export type FlagReason = 'SCAM' | 'DUPLICATE' | 'WRONG_INFO' | 'ALREADY_SOLD' | 'INAPPROPRIATE';
|
||||
|
||||
export interface ReportListingResult {
|
||||
flagId: string;
|
||||
listingId: string;
|
||||
totalReports: number;
|
||||
autoFlagged: boolean;
|
||||
}
|
||||
|
||||
// ─── Interfaces ──────────────────────────────────────────
|
||||
|
||||
@@ -99,7 +109,8 @@ export interface ListingDetail {
|
||||
totalFloors: number | null;
|
||||
direction: Direction | null;
|
||||
yearBuilt: number | null;
|
||||
legalStatus: string | null;
|
||||
legalStatus: LegalStatus | null;
|
||||
certificateVerified: boolean;
|
||||
amenities: string[] | null;
|
||||
nearbyPOIs: unknown;
|
||||
metroDistanceM: number | null;
|
||||
@@ -303,4 +314,7 @@ export const listingsApi = {
|
||||
`/analytics/neighborhoods/${encodeURIComponent(district)}/score?city=${encodeURIComponent(city)}`,
|
||||
)
|
||||
.then((res) => res.data),
|
||||
|
||||
reportListing: (listingId: string, reason: FlagReason, description?: string) =>
|
||||
apiClient.post<ReportListingResult>(`/listings/${listingId}/report`, { reason, description }),
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user