flyer-crawler.projectium.com/pages/AdminPage.tsx

import React from 'react';
import { SystemCheck } from '../components/SystemCheck';
import { Link } from 'react-router-dom';
import { ShieldExclamationIcon } from '../components/icons/ShieldExclamationIcon';

export const AdminPage: React.FC = () => {
    // The onReady prop for SystemCheck is present to allow for future UI changes,
    // such as showing a loading state while the system checks are running.
    // Currently, it does not affect the UI.

    return (
        <div className="max-w-screen-md mx-auto py-8 px-4">
            <div className="mb-8">
                <Link to="/" className="text-brand-primary hover:underline">&larr; Back to Main App</Link>
                <h1 className="text-3xl font-bold text-gray-800 dark:text-white mt-2">Admin Dashboard</h1>
                <p className="text-gray-500 dark:text-gray-400">Tools and system health checks.</p>
            </div>
            <div className="space-y-8">
                <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                    <h3 className="text-lg font-bold text-gray-800 dark:text-white flex items-center mb-3">
                        Management
                    </h3>
                    <Link to="/admin/corrections" className="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors">
                        <ShieldExclamationIcon className="w-6 h-6 mr-3 text-brand-primary" />
                        <span className="font-semibold">Review Corrections</span>
                    </Link>
                </div>
                <SystemCheck onReady={() => { /* The system is ready */ }} />
            </div>
        </div>
    );
};