import { useState, useEffect, useCallback } from 'react' import type { NextPage } from 'next' import Head from 'next/head' import AdminLayout from '../../components/AdminLayout' import { DocumentTextIcon, ExclamationTriangleIcon, CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/outline' interface Report { id: number source_url: string source_domain: string reporter_email?: string reporter_name?: string category_suggestions: string[] description: string priority: string status: string created_at: string } const ReportsManagement: NextPage = () => { const [reports, setReports] = useState([]) const [loading, setLoading] = useState(true) const [filter, setFilter] = useState('pending') const fetchReports = useCallback(async () => { try { const response = await fetch(`/api/admin/reports?status=${filter}`) if (response.ok) { const data = await response.json() setReports(data) } } catch (error) { console.error('Failed to fetch reports:', error) } finally { setLoading(false) } }, [filter]) useEffect(() => { fetchReports() }, [fetchReports]) const handleStatusChange = async (id: number, newStatus: string) => { try { const response = await fetch(`/api/admin/reports/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: newStatus }) }) if (response.ok) { fetchReports() } } catch (error) { console.error('Failed to update report status:', error) } } const getPriorityColor = (priority: string) => { switch (priority) { case 'high': return 'bg-red-100 text-red-800' case 'medium': return 'bg-yellow-100 text-yellow-800' case 'low': return 'bg-green-100 text-green-800' default: return 'bg-gray-100 text-gray-800' } } const getStatusColor = (status: string) => { switch (status) { case 'pending': return 'bg-yellow-100 text-yellow-800' case 'approved': return 'bg-green-100 text-green-800' case 'rejected': return 'bg-red-100 text-red-800' case 'processing': return 'bg-blue-100 text-blue-800' default: return 'bg-gray-100 text-gray-800' } } return ( <> Hlásenia - Hliadka.sk Admin

Prehľad a spracovanie hlásení od používateľov

{loading ? (
Načítavanie hlásení...
) : reports.length === 0 ? (

Žiadne hlásenia

{filter === 'pending' ? 'Momentálne nie sú žiadne čakajúce hlásenia.' : `Žiadne ${filter} hlásenia.`}

) : (
{reports.map((report) => (

{report.source_domain}

{report.priority === 'high' ? 'Vysoká' : report.priority === 'medium' ? 'Stredná' : 'Nízka'} priorita {report.status === 'pending' ? 'Čaká' : report.status === 'approved' ? 'Schválené' : report.status === 'rejected' ? 'Zamietnuté' : 'Spracováva sa'}

{report.description}

URL: {report.source_url}
{report.category_suggestions.length > 0 && (
Navrhované kategórie:
{report.category_suggestions.map((category, idx) => ( {category} ))}
)}
Nahlásené: {new Date(report.created_at).toLocaleString('sk-SK')} {report.reporter_email && ( Reporter: {report.reporter_email} )}
{report.status === 'pending' && ( <> )} {report.status === 'processing' && ( <> )}
))}
)}
) } export default ReportsManagement