119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import type { NextPage } from 'next'
|
|
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
|
|
interface DashboardStats {
|
|
total_sources: number
|
|
pending_sources: number
|
|
pending_reports: number
|
|
high_risk_sources: number
|
|
sources_added_week: number
|
|
reports_today: number
|
|
}
|
|
|
|
const AdminDashboard: NextPage = () => {
|
|
const [stats, setStats] = useState<DashboardStats | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetchStats()
|
|
}, [])
|
|
|
|
const fetchStats = async () => {
|
|
try {
|
|
const response = await fetch('/api/admin/dashboard')
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setStats(data)
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch stats:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<title>Admin Panel - Infohliadka</title>
|
|
</Head>
|
|
<div>Loading...</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<title>Admin Panel - Infohliadka</title>
|
|
</Head>
|
|
|
|
<div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
|
|
<h1>Admin Dashboard</h1>
|
|
|
|
{stats && (
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px', marginTop: '30px' }}>
|
|
<div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
|
|
<h3>Celkové zdroje</h3>
|
|
<div style={{ fontSize: '24px', fontWeight: 'bold' }}>{stats.total_sources}</div>
|
|
</div>
|
|
|
|
<div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
|
|
<h3>Čakajúce schválenie</h3>
|
|
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#f59e0b' }}>{stats.pending_sources}</div>
|
|
</div>
|
|
|
|
<div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
|
|
<h3>Vysoké riziko</h3>
|
|
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#ef4444' }}>{stats.high_risk_sources}</div>
|
|
</div>
|
|
|
|
<div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
|
|
<h3>Nové hlásenia</h3>
|
|
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#3b82f6' }}>{stats.pending_reports}</div>
|
|
</div>
|
|
|
|
<div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
|
|
<h3>Pridané tento týždeň</h3>
|
|
<div style={{ fontSize: '24px', fontWeight: 'bold' }}>{stats.sources_added_week}</div>
|
|
</div>
|
|
|
|
<div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
|
|
<h3>Hlásenia dnes</h3>
|
|
<div style={{ fontSize: '24px', fontWeight: 'bold' }}>{stats.reports_today}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ marginTop: '40px' }}>
|
|
<h2>Rýchle akcie</h2>
|
|
<div style={{ display: 'flex', gap: '15px', marginTop: '20px' }}>
|
|
<Link href="/admin/sources" style={{
|
|
padding: '12px 24px',
|
|
backgroundColor: '#3b82f6',
|
|
color: 'white',
|
|
textDecoration: 'none',
|
|
borderRadius: '6px'
|
|
}}>
|
|
Správa zdrojov
|
|
</Link>
|
|
<Link href="/admin/reports" style={{
|
|
padding: '12px 24px',
|
|
backgroundColor: '#10b981',
|
|
color: 'white',
|
|
textDecoration: 'none',
|
|
borderRadius: '6px'
|
|
}}>
|
|
Hlásenia
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AdminDashboard |