forked from minzeyaphyo/burmddit
Add web admin features + fix scraper & translator
Frontend changes: - Add /admin dashboard for article management - Add AdminButton component (Alt+Shift+A on articles) - Add /api/admin/article API endpoints Backend improvements: - scraper_v2.py: Multi-layer fallback extraction (newspaper → trafilatura → readability) - translator_v2.py: Better chunking, repetition detection, validation - admin_tools.py: CLI admin commands - test_scraper.py: Individual source testing Docs: - WEB-ADMIN-GUIDE.md: Web admin usage - ADMIN-GUIDE.md: CLI admin usage - SCRAPER-IMPROVEMENT-PLAN.md: Scraper fixes details - TRANSLATION-FIX.md: Translation improvements - ADMIN-FEATURES-SUMMARY.md: Implementation summary Fixes: - Article scraping from 0 → 96+ articles working - Translation quality issues (repetition, truncation) - Added 13 new RSS sources
This commit is contained in:
Zeya Phyo
277
frontend/app/admin/page.tsx
Normal file
277
frontend/app/admin/page.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface Article {
|
||||
id: number;
|
||||
title: string;
|
||||
title_burmese: string;
|
||||
slug: string;
|
||||
status: string;
|
||||
content_length: number;
|
||||
burmese_length: number;
|
||||
published_at: string;
|
||||
view_count: number;
|
||||
}
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [password, setPassword] = useState('');
|
||||
const [isAuthed, setIsAuthed] = useState(false);
|
||||
const [articles, setArticles] = useState<Article[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('published');
|
||||
|
||||
useEffect(() => {
|
||||
// Check if already authenticated
|
||||
const stored = sessionStorage.getItem('adminAuth');
|
||||
if (stored) {
|
||||
setIsAuthed(true);
|
||||
setPassword(stored);
|
||||
loadArticles(stored, statusFilter);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleAuth = () => {
|
||||
sessionStorage.setItem('adminAuth', password);
|
||||
setIsAuthed(true);
|
||||
loadArticles(password, statusFilter);
|
||||
};
|
||||
|
||||
const loadArticles = async (authToken: string, status: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(`/api/admin/article?status=${status}&limit=50`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setArticles(data.articles);
|
||||
} else {
|
||||
setMessage('❌ Authentication failed');
|
||||
sessionStorage.removeItem('adminAuth');
|
||||
setIsAuthed(false);
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage('❌ Error loading articles');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAction = async (articleId: number, action: string) => {
|
||||
if (!confirm(`Are you sure you want to ${action} article #${articleId}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/article', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${password}`
|
||||
},
|
||||
body: JSON.stringify({ articleId, action })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setMessage(`✅ Article ${action}ed successfully`);
|
||||
loadArticles(password, statusFilter);
|
||||
} else {
|
||||
const data = await response.json();
|
||||
setMessage(`❌ ${data.error}`);
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage('❌ Error: ' + error);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isAuthed) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
|
||||
<h1 className="text-3xl font-bold mb-6 text-center">🔒 Admin Login</h1>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Admin Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleAuth()}
|
||||
className="w-full px-4 py-3 border rounded-lg mb-4 text-lg"
|
||||
/>
|
||||
<button
|
||||
onClick={handleAuth}
|
||||
className="w-full bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<p className="mt-4 text-sm text-gray-600 text-center">
|
||||
Enter admin password to access dashboard
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const translationRatio = (article: Article) => {
|
||||
if (article.content_length === 0) return 0;
|
||||
return Math.round((article.burmese_length / article.content_length) * 100);
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
return status === 'published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800';
|
||||
};
|
||||
|
||||
const getRatioColor = (ratio: number) => {
|
||||
if (ratio >= 40) return 'text-green-600';
|
||||
if (ratio >= 20) return 'text-yellow-600';
|
||||
return 'text-red-600';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100">
|
||||
<div className="bg-white shadow">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Admin Dashboard</h1>
|
||||
<div className="flex gap-4">
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => {
|
||||
setStatusFilter(e.target.value);
|
||||
loadArticles(password, e.target.value);
|
||||
}}
|
||||
className="px-4 py-2 border rounded-lg"
|
||||
>
|
||||
<option value="published">Published</option>
|
||||
<option value="draft">Draft</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => {
|
||||
sessionStorage.removeItem('adminAuth');
|
||||
setIsAuthed(false);
|
||||
}}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{message && (
|
||||
<div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||
<p className="mt-4 text-gray-600">Loading articles...</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-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Title</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Translation</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Views</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{articles.map((article) => {
|
||||
const ratio = translationRatio(article);
|
||||
return (
|
||||
<tr key={article.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||
{article.id}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-900">
|
||||
<Link
|
||||
href={`/article/${article.slug}`}
|
||||
target="_blank"
|
||||
className="hover:text-blue-600 hover:underline"
|
||||
>
|
||||
{article.title_burmese.substring(0, 80)}...
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(article.status)}`}>
|
||||
{article.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`text-sm font-semibold ${getRatioColor(ratio)}`}>
|
||||
{ratio}%
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 ml-2">
|
||||
({article.burmese_length.toLocaleString()} / {article.content_length.toLocaleString()})
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{article.view_count || 0}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
|
||||
<Link
|
||||
href={`/article/${article.slug}`}
|
||||
target="_blank"
|
||||
className="text-blue-600 hover:text-blue-900"
|
||||
>
|
||||
View
|
||||
</Link>
|
||||
{article.status === 'published' ? (
|
||||
<button
|
||||
onClick={() => handleAction(article.id, 'unpublish')}
|
||||
className="text-yellow-600 hover:text-yellow-900"
|
||||
>
|
||||
Unpublish
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleAction(article.id, 'publish')}
|
||||
className="text-green-600 hover:text-green-900"
|
||||
>
|
||||
Publish
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleAction(article.id, 'delete')}
|
||||
className="text-red-600 hover:text-red-900"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 text-sm text-gray-600">
|
||||
<p>Showing {articles.length} {statusFilter} articles</p>
|
||||
<p className="mt-2">
|
||||
<strong>Translation Quality:</strong>{' '}
|
||||
<span className="text-green-600">40%+ = Good</span>,{' '}
|
||||
<span className="text-yellow-600">20-40% = Check</span>,{' '}
|
||||
<span className="text-red-600"><20% = Poor</span>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user