RegisterFrontend/src/features/admin/adminDashboard/pages/AdminDashboard.jsx
2025-09-07 12:44:54 +02:00

76 lines
3.2 KiB
JavaScript

import React from "react";
import PageLayout from "../../../PageLayout";
import RouteProtection from "../../../RouteProtection";
import GlobalAnimatedBackground from "../../../../background/GlobalAnimatedBackground";
import StatusUserManagement from "../components/StatusUserManagement";
import StatusPermissionManagement from "../components/StatusPermissionManagement";
import StatusServerLogs from "../components/StatusServerLogs";
import { useTranslation } from "react-i18next";
function AdminDashboard() {
const { t } = useTranslation('admin_dashboard');
return (
<RouteProtection requiredRole="admin">
<PageLayout showHeader={true} showFooter={true}>
<div className="relative min-h-screen w-full flex flex-col overflow-hidden">
<GlobalAnimatedBackground />
<div className="relative z-10 w-full flex justify-center">
<div
className="rounded-lg shadow-lg p-4 sm:p-8 bg-gray-100 w-full"
style={{
marginTop: "0.5%", // Match dashboard/referral management top margin
marginBottom: "2%",
width: "100%",
maxWidth: "1600px",
}}
>
{/* Header and subheader, consistent with Dashboard/Referral Management */}
<h2 className="text-2xl sm:text-5xl font-extrabold text-blue-900 mb-2 text-center tracking-tight">
{t('heading.main')}
</h2>
<p className="text-xs sm:text-base text-blue-900 text-center font-semibold mb-4 sm:mb-8">
{t('subtitle.main')}
</p>
<div className="bg-white bg-opacity-90 rounded-lg shadow-lg p-4 sm:p-6 mb-8">
{/* Prominent warning banner */}
<div className="w-full mb-8">
<div className="flex items-center w-full bg-red-100 border-2 border-red-500 rounded-xl shadow px-4 sm:px-8 py-4 sm:py-5">
<svg
className="w-7 h-7 sm:w-8 sm:h-8 text-red-600 mr-3 sm:mr-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 9v2m0 4h.01M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z"
/>
</svg>
<span className="font-bold text-red-700 text-base sm:text-xl">
{t('warning.banner')}
</span>
</div>
</div>
<p className="text-gray-600 text-sm sm:text-base text-center">
{t('subtitle.main')}
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 mb-12">
<StatusUserManagement />
<StatusPermissionManagement />
</div>
<div className="mt-10 sm:mt-16">
<StatusServerLogs />
</div>
</div>
</div>
</div>
</PageLayout>
</RouteProtection>
);
}
export default AdminDashboard;