import React, { useState } from 'react'; import { Head, router } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { ShieldAlert, AlertTriangle, CheckCircle, XCircle, Filter, Flag, Eye, Plus, UserX, Settings, FileText, MessageSquare, Bell, Calendar, Search, ChevronDown, MoreVertical, Clock, Shield } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { Dialog, DialogContent, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; export default function SafetyHub({ reports, rules, moderation_queue }) { const [selectedReport, setSelectedReport] = useState(null); const [isDialogOpen, setIsDialogOpen] = useState(false); const [resolutionAction, setResolutionAction] = useState('warn'); const [adminNotes, setAdminNotes] = useState(''); // Tab and filter states const [activeTab, setActiveTab] = useState('All Reports'); const [searchQuery, setSearchQuery] = useState(''); const [statusFilter, setStatusFilter] = useState('All Status'); const [typeFilter, setTypeFilter] = useState('All Types'); const handleResolve = (e) => { e.preventDefault(); if (!selectedReport) return; router.post(`/admin/safety/reports/${selectedReport.id}/resolve`, { action: resolutionAction, admin_notes: adminNotes }, { onSuccess: () => { setIsDialogOpen(false); setSelectedReport(null); setAdminNotes(''); } }); }; // Filter reports based on active tab, search query, type, and status const filteredReports = (reports || []).filter(report => { // Tab filter if (activeTab !== 'All Reports') { if (activeTab === 'Chats' && report.type !== 'Chat') return false; if (activeTab === 'Reviews' && report.type !== 'Review') return false; } // Type filter dropdown if (typeFilter !== 'All Types' && report.type !== typeFilter) return false; // Status filter dropdown if (statusFilter !== 'All Status' && report.status !== statusFilter) return false; // Search query if (searchQuery.trim() !== '') { const query = searchQuery.toLowerCase(); return ( report.id.toLowerCase().includes(query) || report.reason.toLowerCase().includes(query) || report.reported_user_name.toLowerCase().includes(query) || report.reported_by_name.toLowerCase().includes(query) ); } return true; }); return (

{/* Header Row */}

Safety & Moderation

Review and take action on reported content, users and reviews.

{/* Header Controls */}

May 13, 2025 - Jun 11, 2025

{/* Upper Row Metric Cards */}

{/* Card 1: Total Reports */}

Total Reports {reports ? reports.length : 0} Live database count

{/* Card 2: Pending Review */}

Pending Review {reports ? reports.filter(r => r.status === 'Pending').length : 0} Requires attention

{/* Card 4: Resolved */}

Resolved {reports ? reports.filter(r => r.status === 'Resolved').length : 0} This period

{/* Card 5: Actions Taken */}

Actions Taken {reports ? reports.filter(r => r.status === 'Resolved').length : 0} Warnings/Suspensions

{/* Tabs & Controls Section */}

{/* Tabs list */}

{['All Reports', 'Chats', 'Reviews'].map((tab) => ( ))}

{/* Search & Select Controls */}

{/* Type filter */} {/* Status filter */} {/* Search Box */}

setSearchQuery(e.target.value)} className="bg-white border border-slate-200 pl-10 pr-4 py-2 rounded-xl text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-[#0F6E56]/20 w-full sm:w-60 shadow-sm" />

{/* Table Row Content */}

{filteredReports.map((report) => ( ))} {filteredReports.length === 0 && ( )}

	Report ID	Type	Reported User	Reported By	Reason	Status	Reported At	Actions
	{report.id}	{report.type}	${report.reported_user_name}$ {report.reported_user_name} {report.reported_user_role}	${report.reported_by_name}$ {report.reported_by_name} {report.reported_by_role}	{report.reason}	{report.status}	{report.reported_at}
No incident reports found matching your criteria.

{/* Investigation & Action Dialog Modal */}