import React, { useState } from 'react'; import { Head, router } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { Plus, Search, GripVertical, Edit2, Trash2, Info, ShieldAlert } from 'lucide-react'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog"; export default function ReportReasons({ reasons }) { const [searchTerm, setSearchTerm] = useState(''); const [isDialogOpen, setIsDialogOpen] = useState(false); const [editingReason, setEditingReason] = useState(null); const [reasonName, setReasonName] = useState(''); const [reasonStatus, setReasonStatus] = useState('Active'); const [reasonType, setReasonType] = useState('Both'); const [error, setError] = useState(''); const handleOpenAdd = () => { setEditingReason(null); setReasonName(''); setReasonStatus('Active'); setReasonType('Both'); setError(''); setIsDialogOpen(true); }; const handleOpenEdit = (reason) => { setEditingReason(reason); setReasonName(reason.reason); setReasonStatus(reason.status); setReasonType(reason.type || 'Both'); setError(''); setIsDialogOpen(true); }; const handleSubmit = (e) => { e.preventDefault(); if (!reasonName.trim()) { setError('Reason description is required.'); return; } if (editingReason) { router.post(`/admin/master-data/reasons/${editingReason.id}/update`, { reason: reasonName.trim(), status: reasonStatus, type: reasonType }, { onSuccess: () => { setIsDialogOpen(false); }, onError: (err) => { setError(err.reason || 'Failed to update reason.'); } }); } else { router.post('/master-data/reasons', { reason: reasonName.trim(), type: reasonType }, { onSuccess: () => { setIsDialogOpen(false); }, onError: (err) => { setError(err.reason || 'Failed to add reason.'); } }); } }; const handleDelete = (id) => { if (confirm('Are you sure you want to delete this report reason?')) { router.delete(`/admin/master-data/reasons/${id}`); } }; const filteredReasons = reasons.filter(reason => reason.reason.toLowerCase().includes(searchTerm.toLowerCase()) || reason.type.toLowerCase().includes(searchTerm.toLowerCase()) ); const getTypeBadgeClass = (type) => { switch (type) { case 'Chat': return 'bg-blue-50 text-blue-700 border border-blue-200'; case 'Review': return 'bg-purple-50 text-purple-700 border border-purple-200'; default: return 'bg-teal-50 text-teal-700 border border-teal-200'; } }; return (

{/* Header Actions */}

setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm font-medium focus:ring-4 focus:ring-teal-500/10 outline-none transition-all" />

{/* Reasons Card */}

Reason Master

Manage safety & moderation report reasons

Report Reason Applicable Type Status Action {filteredReasons.length > 0 ? ( filteredReasons.map((reason) => ( {reason.reason} {reason.type} {reason.status}

)) ) : ( No reasons match your search. )}

Tip: Scoping reasons to "Chat" or "Review" helps filter options on the mobile UI. A reason marked "Both" is displayed for all safety reports.

{/* Reason Modal */} ); }