import { Link } from 'react-router'; import { useTranslation } from 'react-i18next'; import { RemnawaveIcon, ArrowPathIcon } from '../components/icons'; import { usePermissionStore } from '@/store/permissions'; // 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 PinnedMessageIcon = () => ( ); const PaperAirplaneIcon = () => ( ); const SparklesIcon = () => ( ); const HandshakeIcon = () => ( ); const CogIcon = () => ( ); const DevicePhoneMobileIcon = () => ( ); const ServerStackIcon = () => ( ); const EnvelopeIcon = () => ( ); const ArrowsUpDownIcon = () => ( ); const ChevronRightIcon = () => ( ); const SecurityGroupIcon = () => ( ); const ShieldIcon = () => ( ); const UserPlusIcon = () => ( ); const DocumentCheckIcon = () => ( ); const ClipboardDocumentListIcon = () => ( ); const RectangleGroupIcon = () => ( ); interface AdminItem { to: string; icon: React.ReactNode; title: string; description: string; permission: 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 }) { const hasPermission = usePermissionStore((state) => state.hasPermission); const visibleItems = group.items.filter((item) => hasPermission(item.permission)); if (visibleItems.length === 0) return null; return (
{/* Group Header */}
{group.icon}

{group.title}

{/* Group Items */}
{visibleItems.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'), permission: 'stats:read', }, { to: '/admin/payments', icon: , title: t('admin.nav.payments'), description: t('admin.panel.paymentsDesc'), permission: 'payments:read', }, { to: '/admin/traffic-usage', icon: , title: t('admin.nav.trafficUsage'), description: t('admin.panel.trafficUsageDesc'), permission: 'traffic:read', }, { to: '/admin/sales-stats', icon: , title: t('admin.nav.salesStats'), description: t('admin.panel.salesStatsDesc'), permission: 'sales_stats:read', }, ], }, { 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'), permission: 'users:read', }, { to: '/admin/tickets', icon: , title: t('admin.nav.tickets'), description: t('admin.panel.ticketsDesc'), permission: 'tickets:read', }, { to: '/admin/ban-system', icon: , title: t('admin.nav.banSystem'), description: t('admin.panel.banSystemDesc'), permission: 'ban_system:read', }, ], }, { 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'), permission: 'tariffs:read', }, { to: '/admin/promocodes', icon: , title: t('admin.nav.promocodes'), description: t('admin.panel.promocodesDesc'), permission: 'promocodes:read', }, { to: '/admin/promo-groups', icon: , title: t('admin.nav.promoGroups'), description: t('admin.panel.promoGroupsDesc'), permission: 'promo_groups:read', }, { to: '/admin/promo-offers', icon: , title: t('admin.nav.promoOffers'), description: t('admin.panel.promoOffersDesc'), permission: 'promo_offers:read', }, { to: '/admin/payment-methods', icon: , title: t('admin.nav.paymentMethods'), description: t('admin.panel.paymentMethodsDesc'), permission: 'payment_methods:read', }, { to: '/admin/landings', icon: , title: t('admin.nav.landings'), description: t('admin.panel.landingsDesc'), permission: 'landings:read', }, ], }, { 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'), permission: 'campaigns:read', }, { to: '/admin/broadcasts', icon: , title: t('admin.nav.broadcasts'), description: t('admin.panel.broadcastsDesc'), permission: 'broadcasts:read', }, { to: '/admin/pinned-messages', icon: , title: t('admin.nav.pinnedMessages'), description: t('admin.panel.pinnedMessagesDesc'), permission: 'pinned_messages:read', }, { to: '/admin/wheel', icon: , title: t('admin.nav.wheel'), description: t('admin.panel.wheelDesc'), permission: 'wheel:read', }, { to: '/admin/partners', icon: , title: t('admin.nav.partners'), description: t('admin.panel.partnersDesc'), permission: 'partners:read', }, { to: '/admin/withdrawals', icon: , title: t('admin.nav.withdrawals'), description: t('admin.panel.withdrawalsDesc'), permission: 'withdrawals:read', }, ], }, { 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/channel-subscriptions', icon: , title: t('admin.nav.channelSubscriptions'), description: t('admin.panel.channelSubscriptionsDesc'), permission: 'channels:read', }, { to: '/admin/settings', icon: , title: t('admin.nav.settings'), description: t('admin.panel.settingsDesc'), permission: 'settings:read', }, { to: '/admin/apps', icon: , title: t('admin.nav.apps'), description: t('admin.panel.appsDesc'), permission: 'apps:read', }, { to: '/admin/servers', icon: , title: t('admin.nav.servers'), description: t('admin.panel.serversDesc'), permission: 'servers:read', }, { to: '/admin/remnawave', icon: , title: t('admin.nav.remnawave'), description: t('admin.panel.remnawaveDesc'), permission: 'remnawave:read', }, { to: '/admin/email-templates', icon: , title: t('admin.nav.emailTemplates'), description: t('admin.panel.emailTemplatesDesc'), permission: 'email_templates:read', }, { to: '/admin/updates', icon: , title: t('admin.nav.updates'), description: t('admin.panel.updatesDesc'), permission: 'updates:read', }, ], }, { id: 'security', title: t('admin.groups.security'), icon: , gradient: 'from-red-500/10 to-orange-500/5', borderColor: 'border-red-500/20', iconBg: 'bg-red-500/20', iconColor: 'text-red-400', items: [ { to: '/admin/roles', icon: , title: t('admin.nav.roles'), description: t('admin.panel.rolesDesc'), permission: 'roles:read', }, { to: '/admin/roles/assign', icon: , title: t('admin.nav.roleAssign'), description: t('admin.panel.roleAssignDesc'), permission: 'roles:assign', }, { to: '/admin/policies', icon: , title: t('admin.nav.policies'), description: t('admin.panel.policiesDesc'), permission: 'roles:read', }, { to: '/admin/audit-log', icon: , title: t('admin.nav.auditLog'), description: t('admin.panel.auditLogDesc'), permission: 'audit_log:read', }, ], }, ]; return (
{/* Header */}

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

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

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