mirror of
https://github.com/kikootwo/ReadMeABook.git
synced 2026-06-02 20:30:10 +00:00
kikootwo
b1492fc32e
Introduce a per-request release blocklist to auto-block permanently failing releases and provide admin management. Changes include: - Database: add BlockedRelease model (blocked_releases) to Prisma schema with unique (requestId, releaseKey) and indexes; documented in backend database docs. - Service & utils: new blocklist.service, release-key and filter helpers for normalization and matching; processors updated to emit auto-blocks (monitor-download, organize-files, search processors, RSS). - HTTP API: add admin endpoints GET/DELETE /api/admin/blocklist, DELETE /api/admin/blocklist/[id], and GET /api/admin/blocklist/by-request/[requestId]. - Admin UI: new /admin/blocklist page and numerous React components (toolbar, filters, table, rows, pagination, skeleton, chips, date picker) with URL-driven state hook and per-row unblock UX. - Tests: add unit/integration tests for service, routes, utils, and updated processor tests. The blocklist is idempotent (upsert), filters search results before ranking (interactive search shows badges only), and admin-only APIs require auth. This commit wires docs, API, DB, frontend and tests for the new feature.
836 lines
34 KiB
TypeScript
836 lines
34 KiB
TypeScript
/**
|
|
* Component: Admin Dashboard Page
|
|
* Documentation: documentation/admin-dashboard.md
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import useSWR, { mutate } from 'swr';
|
|
import Link from 'next/link';
|
|
import { authenticatedFetcher, fetchJSON } from '@/lib/utils/api';
|
|
import { MetricCard } from './components/MetricCard';
|
|
import { ActiveDownloadsTable } from './components/ActiveDownloadsTable';
|
|
import { RecentRequestsTable } from './components/RecentRequestsTable';
|
|
import { ToastProvider, useToast } from '@/components/ui/Toast';
|
|
import { ReportedIssuesSection } from './components/ReportedIssuesSection';
|
|
import { InteractiveTorrentSearchModal } from '@/components/requests/InteractiveTorrentSearchModal';
|
|
import { AudiobookDetailsModal } from '@/components/audiobooks/AudiobookDetailsModal';
|
|
import { BulkImportWizard } from '@/components/admin/BulkImportWizard';
|
|
import { TorrentResult } from '@/lib/utils/ranking-algorithm';
|
|
import { InformationCircleIcon } from '@heroicons/react/24/outline';
|
|
import { formatDistanceToNow } from 'date-fns';
|
|
import { useState } from 'react';
|
|
|
|
interface SelectedTorrentData {
|
|
title?: string;
|
|
indexer?: string;
|
|
size?: number;
|
|
format?: string;
|
|
ebookFormat?: string;
|
|
seeders?: number;
|
|
infoUrl?: string;
|
|
source?: string;
|
|
protocol?: string;
|
|
score?: number;
|
|
}
|
|
|
|
interface PendingApprovalRequest {
|
|
id: string;
|
|
createdAt: string;
|
|
type: 'audiobook' | 'ebook';
|
|
selectedTorrent: SelectedTorrentData | null;
|
|
audiobook: {
|
|
title: string;
|
|
author: string;
|
|
coverArtUrl: string | null;
|
|
audibleAsin: string | null;
|
|
};
|
|
user: {
|
|
id: string;
|
|
plexUsername: string;
|
|
avatarUrl: string | null;
|
|
};
|
|
}
|
|
|
|
function formatTorrentSize(bytes: number): string {
|
|
const gb = bytes / (1024 ** 3);
|
|
const mb = bytes / (1024 ** 2);
|
|
return gb >= 1 ? `${gb.toFixed(1)} GB` : `${mb.toFixed(0)} MB`;
|
|
}
|
|
|
|
function LoadingSpinner() {
|
|
return (
|
|
<svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
interface ApprovalActionButtonsProps {
|
|
isLoading: boolean;
|
|
onApprove: () => void;
|
|
onSearch: () => void;
|
|
onDeny: () => void;
|
|
}
|
|
|
|
function ApprovalActionButtons({ isLoading, onApprove, onSearch, onDeny }: ApprovalActionButtonsProps) {
|
|
return (
|
|
<>
|
|
<button
|
|
onClick={onApprove}
|
|
disabled={isLoading}
|
|
className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
|
|
>
|
|
{isLoading ? <LoadingSpinner /> : (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
)}
|
|
<span>Approve</span>
|
|
</button>
|
|
<button
|
|
onClick={onSearch}
|
|
disabled={isLoading}
|
|
className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<span>Search</span>
|
|
</button>
|
|
<button
|
|
onClick={onDeny}
|
|
disabled={isLoading}
|
|
className="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 bg-red-600 hover:bg-red-700 disabled:bg-red-400 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
|
|
>
|
|
{isLoading ? <LoadingSpinner /> : (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
)}
|
|
<span>Deny</span>
|
|
</button>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function PendingApprovalSection({ requests }: { requests: PendingApprovalRequest[] }) {
|
|
const toast = useToast();
|
|
const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>({});
|
|
const [searchModalRequestId, setSearchModalRequestId] = useState<string | null>(null);
|
|
const [detailsAsin, setDetailsAsin] = useState<string | null>(null);
|
|
const [detailsRequestId, setDetailsRequestId] = useState<string | null>(null);
|
|
|
|
const searchModalRequest = searchModalRequestId
|
|
? requests.find((r) => r.id === searchModalRequestId)
|
|
: null;
|
|
|
|
const detailsRequest = detailsRequestId
|
|
? requests.find((r) => r.id === detailsRequestId)
|
|
: null;
|
|
|
|
const handleApproveRequest = async (requestId: string) => {
|
|
setLoadingStates((prev) => ({ ...prev, [requestId]: true }));
|
|
|
|
try {
|
|
await fetchJSON(`/api/admin/requests/${requestId}/approve`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ action: 'approve' }),
|
|
});
|
|
|
|
toast.success('Request approved');
|
|
|
|
await mutate('/api/admin/requests/pending-approval');
|
|
await mutate('/api/admin/requests/recent');
|
|
await mutate('/api/admin/metrics');
|
|
} catch (error) {
|
|
console.error('[Admin] Failed to approve request:', error);
|
|
toast.error(
|
|
`Failed to approve request: ${error instanceof Error ? error.message : 'Unknown error'}`
|
|
);
|
|
} finally {
|
|
setLoadingStates((prev) => ({ ...prev, [requestId]: false }));
|
|
}
|
|
};
|
|
|
|
const handleDenyRequest = async (requestId: string) => {
|
|
setLoadingStates((prev) => ({ ...prev, [requestId]: true }));
|
|
|
|
try {
|
|
await fetchJSON(`/api/admin/requests/${requestId}/approve`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ action: 'deny' }),
|
|
});
|
|
|
|
toast.success('Request denied');
|
|
|
|
await mutate('/api/admin/requests/pending-approval');
|
|
await mutate('/api/admin/metrics');
|
|
} catch (error) {
|
|
console.error('[Admin] Failed to deny request:', error);
|
|
toast.error(
|
|
`Failed to deny request: ${error instanceof Error ? error.message : 'Unknown error'}`
|
|
);
|
|
} finally {
|
|
setLoadingStates((prev) => ({ ...prev, [requestId]: false }));
|
|
}
|
|
};
|
|
|
|
const handleApproveWithTorrent = async (requestId: string, torrent: TorrentResult) => {
|
|
await fetchJSON(`/api/admin/requests/${requestId}/approve`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ action: 'approve', selectedTorrent: torrent }),
|
|
});
|
|
|
|
toast.success('Request approved and download started');
|
|
|
|
await mutate('/api/admin/requests/pending-approval');
|
|
await mutate('/api/admin/requests/recent');
|
|
await mutate('/api/admin/metrics');
|
|
};
|
|
|
|
return (
|
|
<div className="mb-8">
|
|
{/* Section Header */}
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="flex items-center gap-2">
|
|
<svg
|
|
className="w-6 h-6 text-amber-600 dark:text-amber-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
|
/>
|
|
</svg>
|
|
<h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
|
Requests Awaiting Approval
|
|
</h2>
|
|
</div>
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200">
|
|
{requests.length}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Requests Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{requests.map((request) => {
|
|
const isLoading = loadingStates[request.id] || false;
|
|
const torrent = request.selectedTorrent;
|
|
const displayFormat = torrent?.format || torrent?.ebookFormat;
|
|
const isAnnasArchive = torrent?.source === 'annas_archive';
|
|
|
|
return (
|
|
<div
|
|
key={request.id}
|
|
className="relative bg-white dark:bg-gray-800 border-2 border-amber-200 dark:border-amber-800 rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden"
|
|
>
|
|
{/* Info Button — opens AudiobookDetailsModal */}
|
|
{request.audiobook.audibleAsin && (
|
|
<button
|
|
onClick={() => {
|
|
setDetailsAsin(request.audiobook.audibleAsin);
|
|
setDetailsRequestId(request.id);
|
|
}}
|
|
className="absolute top-2 right-2 z-10 p-1 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
|
|
title="View book details"
|
|
aria-label="View book details"
|
|
>
|
|
<InformationCircleIcon className="w-5 h-5" />
|
|
</button>
|
|
)}
|
|
|
|
{/* Card Content */}
|
|
<div className="p-4">
|
|
<div className="flex gap-3">
|
|
{/* Cover Image */}
|
|
<div className="flex-shrink-0">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={request.audiobook.coverArtUrl || '/placeholder_cover.svg'}
|
|
alt={request.audiobook.title}
|
|
className="w-16 h-16 rounded object-cover"
|
|
onError={(e) => { (e.target as HTMLImageElement).src = '/placeholder_cover.svg'; }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Book Info */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-sm font-bold text-gray-900 dark:text-gray-100 truncate">
|
|
{request.audiobook.title}
|
|
</h3>
|
|
{request.type === 'ebook' && (
|
|
<span
|
|
className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium flex-shrink-0"
|
|
style={{
|
|
backgroundColor: 'rgba(241, 111, 25, 0.15)',
|
|
color: '#f16f19',
|
|
border: '1px solid rgba(241, 111, 25, 0.3)',
|
|
}}
|
|
>
|
|
Ebook
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 truncate">
|
|
{request.audiobook.author}
|
|
</p>
|
|
|
|
{/* User Info */}
|
|
<div className="flex items-center gap-2 mt-2">
|
|
{request.user.avatarUrl ? (
|
|
<img
|
|
src={request.user.avatarUrl}
|
|
alt={request.user.plexUsername}
|
|
className="w-5 h-5 rounded-full"
|
|
/>
|
|
) : (
|
|
<div className="w-5 h-5 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
|
|
<svg
|
|
className="w-3 h-3 text-gray-600 dark:text-gray-400"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
<span className="text-xs text-gray-600 dark:text-gray-400">
|
|
{request.user.plexUsername}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Timestamp */}
|
|
<p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
|
|
{formatDistanceToNow(new Date(request.createdAt), { addSuffix: true })}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pre-Selected Release */}
|
|
{torrent && torrent.title && (
|
|
<div className="mx-4 mb-3 px-3 py-2.5 bg-gray-50 dark:bg-gray-900/60 rounded-lg border border-gray-200 dark:border-gray-700/60">
|
|
<div className="flex items-center gap-1.5 mb-1">
|
|
<svg className="w-3 h-3 text-gray-400 dark:text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
|
</svg>
|
|
<span className="text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
|
|
User-Selected Release
|
|
</span>
|
|
</div>
|
|
{torrent.infoUrl ? (
|
|
<a
|
|
href={torrent.infoUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors line-clamp-2 leading-snug"
|
|
title={torrent.title}
|
|
>
|
|
{torrent.title}
|
|
</a>
|
|
) : (
|
|
<p className="text-xs font-medium text-gray-700 dark:text-gray-300 line-clamp-2 leading-snug" title={torrent.title}>
|
|
{torrent.title}
|
|
</p>
|
|
)}
|
|
<div className="flex items-center gap-1 mt-1.5 text-[11px] text-gray-500 dark:text-gray-400 flex-wrap">
|
|
{isAnnasArchive ? (
|
|
<span className="text-orange-600 dark:text-orange-400 font-medium">Anna's Archive</span>
|
|
) : torrent.indexer ? (
|
|
<span>{torrent.indexer}</span>
|
|
) : null}
|
|
{torrent.size && torrent.size > 0 ? (
|
|
<>
|
|
<span className="text-gray-300 dark:text-gray-600 select-none">·</span>
|
|
<span>{formatTorrentSize(torrent.size)}</span>
|
|
</>
|
|
) : null}
|
|
{displayFormat ? (
|
|
<>
|
|
<span className="text-gray-300 dark:text-gray-600 select-none">·</span>
|
|
<span className="px-1 py-px text-[10px] font-semibold uppercase tracking-wide rounded bg-purple-100 dark:bg-purple-500/15 text-purple-700 dark:text-purple-300">
|
|
{displayFormat}
|
|
</span>
|
|
</>
|
|
) : null}
|
|
{torrent.protocol === 'usenet' ? (
|
|
<>
|
|
<span className="text-gray-300 dark:text-gray-600 select-none">·</span>
|
|
<span className="text-sky-600 dark:text-sky-400 font-medium">NZB</span>
|
|
</>
|
|
) : torrent.seeders !== undefined && torrent.seeders !== null ? (
|
|
<>
|
|
<span className="text-gray-300 dark:text-gray-600 select-none">·</span>
|
|
<span className="text-emerald-600 dark:text-emerald-400">{torrent.seeders} seeds</span>
|
|
</>
|
|
) : null}
|
|
{torrent.score !== undefined && torrent.score !== null ? (
|
|
<>
|
|
<span className="text-gray-300 dark:text-gray-600 select-none">·</span>
|
|
<span className="font-medium">Score {Math.round(torrent.score)}</span>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Action Buttons */}
|
|
<div className="border-t border-amber-200 dark:border-amber-800 bg-gray-50 dark:bg-gray-900/50 px-4 py-3 flex gap-2">
|
|
<ApprovalActionButtons
|
|
isLoading={isLoading}
|
|
onApprove={() => handleApproveRequest(request.id)}
|
|
onSearch={() => setSearchModalRequestId(request.id)}
|
|
onDeny={() => handleDenyRequest(request.id)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Interactive Search Modal */}
|
|
{searchModalRequest && (
|
|
<InteractiveTorrentSearchModal
|
|
isOpen={!!searchModalRequestId}
|
|
onClose={() => setSearchModalRequestId(null)}
|
|
requestId={searchModalRequest.id}
|
|
audiobook={{
|
|
title: searchModalRequest.audiobook.title,
|
|
author: searchModalRequest.audiobook.author,
|
|
}}
|
|
searchMode={searchModalRequest.type === 'ebook' ? 'ebook' : 'audiobook'}
|
|
onConfirm={async (torrent) => {
|
|
await handleApproveWithTorrent(searchModalRequest.id, torrent);
|
|
}}
|
|
onSuccess={() => {
|
|
setSearchModalRequestId(null);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Book Details Modal — opened via info button on each approval card */}
|
|
{detailsAsin && detailsRequestId && (
|
|
<AudiobookDetailsModal
|
|
asin={detailsAsin}
|
|
isOpen={true}
|
|
onClose={() => { setDetailsAsin(null); setDetailsRequestId(null); }}
|
|
requestStatus="awaiting_approval"
|
|
requestedByUsername={detailsRequest?.user.plexUsername ?? null}
|
|
adminActions={
|
|
<ApprovalActionButtons
|
|
isLoading={loadingStates[detailsRequestId] || false}
|
|
onApprove={async () => {
|
|
await handleApproveRequest(detailsRequestId);
|
|
setDetailsAsin(null);
|
|
setDetailsRequestId(null);
|
|
}}
|
|
onSearch={() => {
|
|
setSearchModalRequestId(detailsRequestId);
|
|
setDetailsAsin(null);
|
|
setDetailsRequestId(null);
|
|
}}
|
|
onDeny={async () => {
|
|
await handleDenyRequest(detailsRequestId);
|
|
setDetailsAsin(null);
|
|
setDetailsRequestId(null);
|
|
}}
|
|
/>
|
|
}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AdminDashboardContent() {
|
|
const [isBulkImportOpen, setIsBulkImportOpen] = useState(false);
|
|
|
|
// Fetch data with auto-refresh every 10 seconds
|
|
const { data: metrics, error: metricsError } = useSWR(
|
|
'/api/admin/metrics',
|
|
authenticatedFetcher,
|
|
{
|
|
refreshInterval: 10000,
|
|
}
|
|
);
|
|
|
|
const { data: downloadsData, error: downloadsError } = useSWR(
|
|
'/api/admin/downloads/active',
|
|
authenticatedFetcher,
|
|
{
|
|
refreshInterval: 5000, // Refresh downloads more frequently
|
|
}
|
|
);
|
|
|
|
// Note: RecentRequestsTable now fetches its own data with filtering/pagination
|
|
|
|
const { data: pendingApprovalData } = useSWR(
|
|
'/api/admin/requests/pending-approval',
|
|
authenticatedFetcher,
|
|
{
|
|
refreshInterval: 10000,
|
|
}
|
|
);
|
|
|
|
const { data: reportedIssuesData } = useSWR(
|
|
'/api/admin/reported-issues',
|
|
authenticatedFetcher,
|
|
{
|
|
refreshInterval: 10000,
|
|
}
|
|
);
|
|
|
|
const { data: settingsData } = useSWR(
|
|
'/api/admin/settings',
|
|
authenticatedFetcher,
|
|
{
|
|
refreshInterval: 60000, // Settings change infrequently
|
|
}
|
|
);
|
|
|
|
const isLoading = !metrics || !downloadsData;
|
|
const hasError = metricsError || downloadsError;
|
|
|
|
if (hasError) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
|
|
<h3 className="text-sm font-medium text-red-800 dark:text-red-200">
|
|
Error Loading Dashboard
|
|
</h3>
|
|
<p className="text-sm text-red-700 dark:text-red-300 mt-1">
|
|
{metricsError?.message ||
|
|
downloadsError?.message ||
|
|
'Failed to load dashboard data'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{/* Header */}
|
|
<div className="sticky top-0 z-10 mb-8 flex items-center justify-between bg-gray-50 dark:bg-gray-900 py-4 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 border-b border-gray-200 dark:border-gray-800">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
|
|
Admin Dashboard
|
|
</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-2">
|
|
Monitor system health, active downloads, and recent requests
|
|
</p>
|
|
</div>
|
|
<Link
|
|
href="/"
|
|
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
</svg>
|
|
<span className="hidden sm:inline">Back to Home</span>
|
|
<span className="sm:hidden">Home</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Metrics Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
|
<MetricCard
|
|
title="Total Requests"
|
|
value={metrics.totalRequests}
|
|
icon={
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z" />
|
|
</svg>
|
|
}
|
|
variant="default"
|
|
/>
|
|
|
|
<MetricCard
|
|
title="Active Downloads"
|
|
value={metrics.activeDownloads}
|
|
icon={
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
}
|
|
variant={metrics.activeDownloads > 0 ? 'info' : 'default'}
|
|
/>
|
|
|
|
<MetricCard
|
|
title="Completed (30d)"
|
|
value={metrics.completedLast30Days}
|
|
icon={
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
}
|
|
variant="success"
|
|
/>
|
|
|
|
<MetricCard
|
|
title="Failed (30d)"
|
|
value={metrics.failedLast30Days}
|
|
icon={
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
}
|
|
variant={metrics.failedLast30Days > 0 ? 'error' : 'default'}
|
|
/>
|
|
|
|
<MetricCard
|
|
title="Total Users"
|
|
value={metrics.totalUsers}
|
|
icon={
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
|
|
</svg>
|
|
}
|
|
variant="default"
|
|
/>
|
|
|
|
<MetricCard
|
|
title="System Health"
|
|
value={metrics.systemHealth.status.toUpperCase()}
|
|
icon={
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
}
|
|
variant={
|
|
metrics.systemHealth.status === 'healthy'
|
|
? 'success'
|
|
: metrics.systemHealth.status === 'degraded'
|
|
? 'warning'
|
|
: 'error'
|
|
}
|
|
subtitle={
|
|
metrics.systemHealth.issues.length > 0
|
|
? metrics.systemHealth.issues.join(', ')
|
|
: 'All systems operational'
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
|
|
<Link
|
|
href="/admin/settings"
|
|
className="block p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-md transition-all"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<svg
|
|
className="w-6 h-6 text-gray-600 dark:text-gray-400"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="font-medium text-gray-900 dark:text-gray-100">
|
|
Settings
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link
|
|
href="/admin/users"
|
|
className="block p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-md transition-all"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<svg
|
|
className="w-6 h-6 text-gray-600 dark:text-gray-400"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
|
|
</svg>
|
|
<span className="font-medium text-gray-900 dark:text-gray-100">
|
|
Users
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link
|
|
href="/admin/jobs"
|
|
className="block p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-md transition-all"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<svg
|
|
className="w-6 h-6 text-gray-600 dark:text-gray-400"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="font-medium text-gray-900 dark:text-gray-100">
|
|
Scheduled Jobs
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link
|
|
href="/admin/logs"
|
|
className="block p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-md transition-all"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<svg
|
|
className="w-6 h-6 text-gray-600 dark:text-gray-400"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span className="font-medium text-gray-900 dark:text-gray-100">
|
|
System Logs
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link
|
|
href="/admin/blocklist"
|
|
className="block p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-md transition-all"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<svg
|
|
className="w-6 h-6 text-gray-600 dark:text-gray-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
|
|
/>
|
|
</svg>
|
|
<span className="font-medium text-gray-900 dark:text-gray-100">
|
|
Blocklist
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
<button
|
|
onClick={() => setIsBulkImportOpen(true)}
|
|
className="block p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-md transition-all text-left"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<svg
|
|
className="w-6 h-6 text-gray-600 dark:text-gray-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
/>
|
|
</svg>
|
|
<span className="font-medium text-gray-900 dark:text-gray-100">
|
|
Bulk Import
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Bulk Import Wizard Modal */}
|
|
<BulkImportWizard
|
|
isOpen={isBulkImportOpen}
|
|
onClose={() => setIsBulkImportOpen(false)}
|
|
/>
|
|
|
|
{/* Requests Awaiting Approval */}
|
|
{pendingApprovalData?.requests && pendingApprovalData.requests.length > 0 && (
|
|
<PendingApprovalSection requests={pendingApprovalData.requests} />
|
|
)}
|
|
|
|
{/* Reported Issues */}
|
|
{reportedIssuesData?.issues && reportedIssuesData.issues.length > 0 && (
|
|
<ReportedIssuesSection issues={reportedIssuesData.issues} />
|
|
)}
|
|
|
|
{/* Active Downloads */}
|
|
<div className="mb-8">
|
|
<h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
|
Active Downloads
|
|
</h2>
|
|
<ActiveDownloadsTable downloads={downloadsData.downloads} />
|
|
</div>
|
|
|
|
{/* Request Management */}
|
|
<div className="mb-8">
|
|
<h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
|
Request Management
|
|
</h2>
|
|
<RecentRequestsTable
|
|
ebookSidecarEnabled={settingsData?.ebook?.annasArchiveEnabled || settingsData?.ebook?.indexerSearchEnabled || false}
|
|
annasArchiveBaseUrl={settingsData?.ebook?.baseUrl}
|
|
/>
|
|
</div>
|
|
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function AdminDashboard() {
|
|
return (
|
|
<ToastProvider>
|
|
<AdminDashboardContent />
|
|
</ToastProvider>
|
|
);
|
|
}
|