Files
1efa314f-7886-432d-b7bd-83b…/src/app/admin/page.tsx
2026-03-03 05:32:04 +00:00

225 lines
8.0 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterCard from "@/components/sections/footer/FooterCard";
import {
UserX,
Eye,
FileText,
Layers,
Lock,
Heart,
MessageCircle,
Globe,
Mail,
} from "lucide-react";
export default function AdminPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="small"
sizing="mediumLarge"
background="none"
cardStyle="outline"
primaryButtonStyle="double-inset"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Bayat Al-Islam"
navItems={[
{ name: "Home", id: "/" },
{ name: "Features", id: "/features" },
{ name: "Dashboard", id: "/admin" },
{ name: "Chat", id: "/chat" },
]}
button={{ text: "Join Community", href: "/contact" }}
animateOnLoad={true}
className="shadow-lg backdrop-blur-sm"
/>
</div>
{/* Admin Controls Section */}
<div id="admin" data-section="admin">
<FeatureCardTwentyFive
title="Advanced Admin Controls"
description="Enterprise-grade moderation and community management tools"
tag="Administration"
tagIcon={Lock}
tagAnimation="entrance-slide"
features={[
{
title: "User Management",
description:
"Ban, kick, and manage members with detailed action logs. Track user history, warnings, and infractions across the platform.",
icon: UserX,
mediaItems: [
{
imageSrc:
"http://img.b2bpic.net/free-photo/mobile-security-app_53876-98145.jpg?_wi=2",
imageAlt: "User moderation",
},
{
imageSrc:
"http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg?_wi=3",
imageAlt: "User management interface",
},
],
},
{
title: "Content Moderation",
description:
"Advanced filtering, auto-moderation, and word filters. Flag inappropriate content and maintain community standards.",
icon: Eye,
mediaItems: [
{
imageSrc:
"http://img.b2bpic.net/free-photo/modern-workspace-with-analytical-data-dashboards-displayed-devices_482257-126633.jpg?_wi=2",
imageAlt: "Content analysis",
},
{
imageSrc:
"http://img.b2bpic.net/free-photo/e-mail-global-communications-connection-social-networking-concept_53876-134026.jpg?_wi=2",
imageAlt: "Content filtering",
},
],
},
{
title: "Audit Logs",
description:
"Detailed logging of all administrative actions. Track who did what and when for complete transparency and accountability.",
icon: FileText,
mediaItems: [
{
imageSrc:
"http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg?_wi=4",
imageAlt: "Audit logs",
},
{
imageSrc:
"http://img.b2bpic.net/free-photo/modern-workspace-with-analytical-data-dashboards-displayed-devices_482257-126633.jpg?_wi=3",
imageAlt: "Activity tracking",
},
],
},
{
title: "Channel Control",
description:
"Create and organize channels by category. Set permissions, manage topics, and configure automated channels.",
icon: Layers,
mediaItems: [
{
imageSrc:
"http://img.b2bpic.net/free-vector/image-upload-concept-landing-page_23-2148309692.jpg?_wi=2",
imageAlt: "Channel organization",
},
{
imageSrc:
"http://img.b2bpic.net/free-vector/flat-organizational-chart-infographic_23-2149016825.jpg?_wi=2",
imageAlt: "Permission management",
},
],
},
]}
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={true}
buttons={[{ text: "Access Dashboard", href: "/admin" }]}
/>
</div>
{/* Admin Metrics Section */}
<div id="admin-metrics" data-section="admin-metrics">
<MetricCardSeven
title="Admin Dashboard Analytics"
description="Real-time insights into community management and moderation effectiveness"
tag="Administration"
metrics={[
{
id: "1",
value: "2,500+",
title: "Moderation Actions This Month",
items: [
"500+ warnings issued",
"150+ members banned",
"1,200+ messages flagged",
],
},
{
id: "2",
value: "98%",
title: "Community Satisfaction Rate",
items: [
"Positive member feedback",
"Safe environment maintained",
"Swift response to issues",
],
},
{
id: "3",
value: "50+",
title: "Active Moderators",
items: [
"24/7 coverage across time zones",
"Dedicated admin team",
"Regular training programs",
],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
{/* CTA Section */}
<div id="admin-cta" data-section="admin-cta">
<ContactCenter
tag="Ready to Manage?"
tagIcon={Heart}
title="Take Control of Your Community"
description="Our admin dashboard gives you all the tools needed to manage a thriving, safe community. Monitor metrics, moderate content, and grow your platform with confidence."
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email"
buttonText="Get Admin Access"
termsText="By requesting admin access, you agree to uphold our Community Guidelines. We'll review your request and provide training."
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterCard
logoText="Bayat Al-Islam"
copyrightText="© 2025 Bayat Al-Islam Community. All rights reserved. Built with faith and inclusivity."
socialLinks={[
{
icon: MessageCircle,
href: "https://discord.gg/bayatalislamm",
ariaLabel: "Discord Community",
},
{
icon: Globe,
href: "https://bayatalislamm.com",
ariaLabel: "Official Website",
},
{
icon: Mail,
href: "mailto:info@bayatalislamm.com",
ariaLabel: "Email Contact",
},
]}
/>
</div>
</ThemeProvider>
);
}