import { Link } from 'react-router'; import { useTranslation } from 'react-i18next'; import { RemnawaveIcon, ArrowPathIcon } from '../components/icons'; // Group header icons const AnalyticsGroupIcon = () => ( ); const UsersGroupIcon = () => ( ); const TariffsGroupIcon = () => ( ); const MarketingGroupIcon = () => ( ); const SystemGroupIcon = () => ( ); // Modern icons with consistent styling const ChartBarIcon = () => ( ); const BanknotesIcon = () => ( ); const UsersIcon = () => ( ); const ChatBubbleIcon = () => ( ); const NoSymbolIcon = () => ( ); const CreditCardIcon = () => ( ); const TicketIcon = () => ( ); const GiftIcon = () => ( ); const UserGroupIcon = () => ( ); const MegaphoneIcon = () => ( ); const PaperAirplaneIcon = () => ( ); const SparklesIcon = () => ( ); const CogIcon = () => ( ); const DevicePhoneMobileIcon = () => ( ); const ServerStackIcon = () => ( ); const EnvelopeIcon = () => ( ); const ArrowsUpDownIcon = () => ( ); const ChevronRightIcon = () => ( ); interface AdminItem { to: string; icon: React.ReactNode; title: string; description: string; } interface AdminGroup { id: string; title: string; icon: React.ReactNode; gradient: string; borderColor: string; iconBg: string; iconColor: string; items: AdminItem[]; } function AdminCard({ to, icon, title, description, iconBg, iconColor, }: AdminItem & { iconBg: string; iconColor: string }) { return (
{icon}

{title}

{description}

); } function GroupSection({ group }: { group: AdminGroup }) { return (
{/* Group Header */}
{group.icon}

{group.title}

{/* Group Items */}
{group.items.map((item) => ( ))}
); } export default function AdminPanel() { const { t } = useTranslation(); const groups: AdminGroup[] = [ { id: 'analytics', title: t('admin.groups.analytics'), icon: , gradient: 'from-success-500/10 to-success-500/5', borderColor: 'border-success-500/20', iconBg: 'bg-success-500/20', iconColor: 'text-success-400', items: [ { to: '/admin/dashboard', icon: , title: t('admin.nav.dashboard'), description: t('admin.panel.dashboardDesc'), }, { to: '/admin/payments', icon: , title: t('admin.nav.payments'), description: t('admin.panel.paymentsDesc'), }, { to: '/admin/traffic-usage', icon: , title: t('admin.nav.trafficUsage'), description: t('admin.panel.trafficUsageDesc'), }, ], }, { id: 'users', title: t('admin.groups.users'), icon: , gradient: 'from-accent-500/10 to-accent-500/5', borderColor: 'border-accent-500/20', iconBg: 'bg-accent-500/20', iconColor: 'text-accent-400', items: [ { to: '/admin/users', icon: , title: t('admin.nav.users'), description: t('admin.panel.usersDesc'), }, { to: '/admin/tickets', icon: , title: t('admin.nav.tickets'), description: t('admin.panel.ticketsDesc'), }, { to: '/admin/ban-system', icon: , title: t('admin.nav.banSystem'), description: t('admin.panel.banSystemDesc'), }, ], }, { id: 'tariffs', title: t('admin.groups.tariffs'), icon: , gradient: 'from-warning-500/10 to-warning-500/5', borderColor: 'border-warning-500/20', iconBg: 'bg-warning-500/20', iconColor: 'text-warning-400', items: [ { to: '/admin/tariffs', icon: , title: t('admin.nav.tariffs'), description: t('admin.panel.tariffsDesc'), }, { to: '/admin/promocodes', icon: , title: t('admin.nav.promocodes'), description: t('admin.panel.promocodesDesc'), }, { to: '/admin/promo-groups', icon: , title: t('admin.nav.promoGroups'), description: t('admin.panel.promoGroupsDesc'), }, { to: '/admin/promo-offers', icon: , title: t('admin.nav.promoOffers'), description: t('admin.panel.promoOffersDesc'), }, { to: '/admin/payment-methods', icon: , title: t('admin.nav.paymentMethods'), description: t('admin.panel.paymentMethodsDesc'), }, ], }, { id: 'marketing', title: t('admin.groups.marketing'), icon: , gradient: 'from-error-500/10 to-error-500/5', borderColor: 'border-error-500/20', iconBg: 'bg-error-500/20', iconColor: 'text-error-400', items: [ { to: '/admin/campaigns', icon: , title: t('admin.nav.campaigns'), description: t('admin.panel.campaignsDesc'), }, { to: '/admin/broadcasts', icon: , title: t('admin.nav.broadcasts'), description: t('admin.panel.broadcastsDesc'), }, { to: '/admin/wheel', icon: , title: t('admin.nav.wheel'), description: t('admin.panel.wheelDesc'), }, ], }, { id: 'system', title: t('admin.groups.system'), icon: , gradient: 'from-violet-500/10 to-violet-500/5', borderColor: 'border-violet-500/20', iconBg: 'bg-violet-500/20', iconColor: 'text-violet-400', items: [ { to: '/admin/settings', icon: , title: t('admin.nav.settings'), description: t('admin.panel.settingsDesc'), }, { to: '/admin/apps', icon: , title: t('admin.nav.apps'), description: t('admin.panel.appsDesc'), }, { to: '/admin/servers', icon: , title: t('admin.nav.servers'), description: t('admin.panel.serversDesc'), }, { to: '/admin/remnawave', icon: , title: t('admin.nav.remnawave'), description: t('admin.panel.remnawaveDesc'), }, { to: '/admin/email-templates', icon: , title: t('admin.nav.emailTemplates'), description: t('admin.panel.emailTemplatesDesc'), }, { to: '/admin/updates', icon: , title: t('admin.nav.updates'), description: t('admin.panel.updatesDesc'), }, ], }, ]; return (
{/* Header */}

{t('admin.panel.title')}

{t('admin.panel.subtitle')}

{/* Groups Grid */}
{groups.map((group) => ( ))}
); }