feat: Add user reports management dashboard with status filtering, counts, and review functionality including admin notes.
This commit is contained in:
pradeepkumar
253
src/app/dashboard/reports/page.tsx
Normal file
253
src/app/dashboard/reports/page.tsx
Normal file
@@ -0,0 +1,253 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { userReportsService, type UserReport, type ReportCounts } from '@/services/user-reports.service';
|
||||||
|
import { getErrorMessage } from '@/services';
|
||||||
|
|
||||||
|
function getUserName(user: UserReport['reporter']): string {
|
||||||
|
const profile = user.userProfile || user.agentProfile;
|
||||||
|
if (profile?.firstName || profile?.lastName) {
|
||||||
|
return [profile.firstName, profile.lastName].filter(Boolean).join(' ');
|
||||||
|
}
|
||||||
|
return user.email;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STATUS_COLORS: Record<string, string> = {
|
||||||
|
PENDING: 'bg-yellow-100 text-yellow-800',
|
||||||
|
REVIEWED: 'bg-blue-100 text-blue-800',
|
||||||
|
RESOLVED: 'bg-green-100 text-green-800',
|
||||||
|
DISMISSED: 'bg-gray-100 text-gray-800',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ReportsPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [reports, setReports] = useState<UserReport[]>([]);
|
||||||
|
const [counts, setCounts] = useState<ReportCounts | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||||
|
const [selectedReport, setSelectedReport] = useState<UserReport | null>(null);
|
||||||
|
const [adminNotes, setAdminNotes] = useState('');
|
||||||
|
const [updatingId, setUpdatingId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setError('');
|
||||||
|
const [reportsList, reportCounts] = await Promise.all([
|
||||||
|
userReportsService.getAllReports(statusFilter || undefined),
|
||||||
|
userReportsService.getReportCounts(),
|
||||||
|
]);
|
||||||
|
setReports(reportsList);
|
||||||
|
setCounts(reportCounts);
|
||||||
|
} catch (err) {
|
||||||
|
const msg = getErrorMessage(err);
|
||||||
|
setError(msg);
|
||||||
|
if (msg.includes('Unauthorized')) router.push('/login');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchData();
|
||||||
|
}, [statusFilter]);
|
||||||
|
|
||||||
|
const handleUpdateStatus = async (reportId: string, status: string) => {
|
||||||
|
try {
|
||||||
|
setUpdatingId(reportId);
|
||||||
|
const updated = await userReportsService.updateReport(reportId, status, adminNotes || undefined);
|
||||||
|
setReports((prev) => prev.map((r) => (r.id === reportId ? updated : r)));
|
||||||
|
setSelectedReport(null);
|
||||||
|
setAdminNotes('');
|
||||||
|
// Refresh counts
|
||||||
|
const reportCounts = await userReportsService.getReportCounts();
|
||||||
|
setCounts(reportCounts);
|
||||||
|
} catch (err) {
|
||||||
|
setError(getErrorMessage(err));
|
||||||
|
} finally {
|
||||||
|
setUpdatingId(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 mb-6">User Reports</h1>
|
||||||
|
|
||||||
|
{/* Status Counts */}
|
||||||
|
{counts && (
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
|
||||||
|
{[
|
||||||
|
{ label: 'Total', value: counts.total, color: 'bg-gray-50' },
|
||||||
|
{ label: 'Pending', value: counts.pending, color: 'bg-yellow-50' },
|
||||||
|
{ label: 'Reviewed', value: counts.reviewed, color: 'bg-blue-50' },
|
||||||
|
{ label: 'Resolved', value: counts.resolved, color: 'bg-green-50' },
|
||||||
|
{ label: 'Dismissed', value: counts.dismissed, color: 'bg-gray-50' },
|
||||||
|
].map((stat) => (
|
||||||
|
<div key={stat.label} className={`${stat.color} rounded-lg p-4 border border-gray-200`}>
|
||||||
|
<p className="text-sm text-gray-600">{stat.label}</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{stat.value}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Filter */}
|
||||||
|
<div className="mb-4 flex items-center gap-3">
|
||||||
|
<label className="text-sm font-medium text-gray-700">Filter by status:</label>
|
||||||
|
<select
|
||||||
|
value={statusFilter}
|
||||||
|
onChange={(e) => setStatusFilter(e.target.value)}
|
||||||
|
className="px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-900 bg-white"
|
||||||
|
>
|
||||||
|
<option value="">All</option>
|
||||||
|
<option value="PENDING">Pending</option>
|
||||||
|
<option value="REVIEWED">Reviewed</option>
|
||||||
|
<option value="RESOLVED">Resolved</option>
|
||||||
|
<option value="DISMISSED">Dismissed</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="p-3 bg-red-50 border border-red-200 rounded-lg mb-4">
|
||||||
|
<p className="text-red-700 text-sm">{error}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex justify-center py-12">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||||
|
</div>
|
||||||
|
) : reports.length === 0 ? (
|
||||||
|
<div className="text-center py-12 bg-white rounded-lg border border-gray-200">
|
||||||
|
<p className="text-gray-500">No reports found</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead className="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Reporter</th>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Reported User</th>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Reason</th>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
|
||||||
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-gray-200">
|
||||||
|
{reports.map((report) => (
|
||||||
|
<tr key={report.id} className="hover:bg-gray-50">
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<p className="text-sm font-medium text-gray-900">{getUserName(report.reporter)}</p>
|
||||||
|
<p className="text-xs text-gray-500">{report.reporter.email}</p>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<p className="text-sm font-medium text-gray-900">{getUserName(report.reportedUser)}</p>
|
||||||
|
<p className="text-xs text-gray-500">{report.reportedUser.email}</p>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<p className="text-sm text-gray-900">{report.reason}</p>
|
||||||
|
{report.description && (
|
||||||
|
<p className="text-xs text-gray-500 mt-1 truncate max-w-[200px]">{report.description}</p>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<span className={`px-2 py-1 text-xs font-semibold rounded-full ${STATUS_COLORS[report.status]}`}>
|
||||||
|
{report.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-500">
|
||||||
|
{new Date(report.createdAt).toLocaleDateString()}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedReport(report);
|
||||||
|
setAdminNotes(report.adminNotes || '');
|
||||||
|
}}
|
||||||
|
className="text-sm text-blue-600 hover:text-blue-800 font-medium"
|
||||||
|
>
|
||||||
|
Review
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Review Modal */}
|
||||||
|
{selectedReport && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4">
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">Review Report</h3>
|
||||||
|
</div>
|
||||||
|
<div className="px-6 py-4 space-y-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-700">Reporter</p>
|
||||||
|
<p className="text-sm text-gray-900">{getUserName(selectedReport.reporter)} ({selectedReport.reporter.email})</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-700">Reported User</p>
|
||||||
|
<p className="text-sm text-gray-900">{getUserName(selectedReport.reportedUser)} ({selectedReport.reportedUser.email})</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-700">Reason</p>
|
||||||
|
<p className="text-sm text-gray-900">{selectedReport.reason}</p>
|
||||||
|
</div>
|
||||||
|
{selectedReport.description && (
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-700">Description</p>
|
||||||
|
<p className="text-sm text-gray-900">{selectedReport.description}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700 block mb-1">Admin Notes</label>
|
||||||
|
<textarea
|
||||||
|
value={adminNotes}
|
||||||
|
onChange={(e) => setAdminNotes(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-900 bg-white placeholder:text-gray-500"
|
||||||
|
placeholder="Add notes about this report..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-6 py-4 border-t border-gray-200 flex flex-wrap gap-2 justify-end">
|
||||||
|
<button
|
||||||
|
onClick={() => { setSelectedReport(null); setAdminNotes(''); }}
|
||||||
|
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleUpdateStatus(selectedReport.id, 'DISMISSED')}
|
||||||
|
disabled={updatingId === selectedReport.id}
|
||||||
|
className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors text-sm disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Dismiss
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleUpdateStatus(selectedReport.id, 'REVIEWED')}
|
||||||
|
disabled={updatingId === selectedReport.id}
|
||||||
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Mark Reviewed
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleUpdateStatus(selectedReport.id, 'RESOLVED')}
|
||||||
|
disabled={updatingId === selectedReport.id}
|
||||||
|
className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Resolve
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -91,6 +91,20 @@ const menuItems = [
|
|||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'User Reports',
|
||||||
|
href: '/dashboard/reports',
|
||||||
|
icon: (
|
||||||
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'Support Chat',
|
name: 'Support Chat',
|
||||||
href: '/dashboard/support-chat',
|
href: '/dashboard/support-chat',
|
||||||
|
|||||||
51
src/services/user-reports.service.ts
Normal file
51
src/services/user-reports.service.ts
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
import api, { ApiResponse } from './api';
|
||||||
|
|
||||||
|
interface UserInfo {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
userProfile: { firstName: string | null; lastName: string | null } | null;
|
||||||
|
agentProfile: { firstName: string | null; lastName: string | null } | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserReport {
|
||||||
|
id: string;
|
||||||
|
reporterId: string;
|
||||||
|
reportedUserId: string;
|
||||||
|
conversationId: string | null;
|
||||||
|
reason: string;
|
||||||
|
description: string | null;
|
||||||
|
status: 'PENDING' | 'REVIEWED' | 'RESOLVED' | 'DISMISSED';
|
||||||
|
adminNotes: string | null;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
reporter: UserInfo;
|
||||||
|
reportedUser: UserInfo;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ReportCounts {
|
||||||
|
pending: number;
|
||||||
|
reviewed: number;
|
||||||
|
resolved: number;
|
||||||
|
dismissed: number;
|
||||||
|
total: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
class UserReportsService {
|
||||||
|
async getAllReports(status?: string): Promise<UserReport[]> {
|
||||||
|
const params = status ? { status } : {};
|
||||||
|
const response = await api.get<ApiResponse<UserReport[]>>('/user-reports/admin/all', { params });
|
||||||
|
return response.data.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async getReportCounts(): Promise<ReportCounts> {
|
||||||
|
const response = await api.get<ApiResponse<ReportCounts>>('/user-reports/admin/counts');
|
||||||
|
return response.data.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async updateReport(id: string, status: string, adminNotes?: string): Promise<UserReport> {
|
||||||
|
const response = await api.patch<ApiResponse<UserReport>>(`/user-reports/admin/${id}`, { status, adminNotes });
|
||||||
|
return response.data.data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const userReportsService = new UserReportsService();
|
||||||
Reference in New Issue
Block a user