2026-04-11 11:55:25 -05:00
|
|
|
import { useState, useMemo, useEffect, useCallback } from 'react'
|
2026-04-11 11:51:18 -05:00
|
|
|
import { Outlet, Link, useNavigate, useLocation } from 'react-router-dom'
|
2026-04-05 10:45:21 -05:00
|
|
|
import {
|
2026-04-11 11:51:18 -05:00
|
|
|
LayoutDashboard, Settings, HelpCircle, Network, BookUser, UserCog,
|
|
|
|
|
Wrench, Languages, HardDrive, GitFork, RefreshCw, Activity,
|
|
|
|
|
Users, UserCheck, ArrowRightLeft, Paintbrush, Package,
|
|
|
|
|
Globe, Database, Wifi, Box, Mail, HeartPulse, Lock,
|
|
|
|
|
ShoppingBag, Code2, Puzzle, LogOut, Menu, X,
|
2026-04-11 11:55:25 -05:00
|
|
|
ChevronDown, ChevronRight, Search, RotateCcw, RefreshCcw,
|
|
|
|
|
ArrowUpCircle, CheckCircle2, AlertCircle, Loader2
|
2026-04-05 10:45:21 -05:00
|
|
|
} from 'lucide-react'
|
2026-04-11 11:55:25 -05:00
|
|
|
import axios from 'axios'
|
2026-04-05 10:45:21 -05:00
|
|
|
import { useAuth } from '../contexts/AuthContext'
|
|
|
|
|
|
2026-04-11 11:51:18 -05:00
|
|
|
// ─── Nav data ────────────────────────────────────────────────────────────────
|
|
|
|
|
|
|
|
|
|
type NavItem = { label: string; to: string }
|
|
|
|
|
type NavCategory = {
|
|
|
|
|
id: string
|
|
|
|
|
label: string
|
|
|
|
|
icon: React.ComponentType<{ size?: number; className?: string }>
|
|
|
|
|
items: NavItem[]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const NAV: NavCategory[] = [
|
|
|
|
|
{
|
|
|
|
|
id: 'server-config',
|
|
|
|
|
label: 'Server Configuration',
|
|
|
|
|
icon: Settings,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Basic WebHost Manager® Setup', to: '/settings' },
|
|
|
|
|
{ label: 'Change Root Password', to: '/security' },
|
|
|
|
|
{ label: 'Configure Analytics', to: '/settings' },
|
|
|
|
|
{ label: 'Configure Cron Jobs', to: '/settings' },
|
|
|
|
|
{ label: 'Initial Quota Setup', to: '/settings' },
|
|
|
|
|
{ label: 'Link Server Nodes', to: '/settings' },
|
|
|
|
|
{ label: 'Server Profile', to: '/settings' },
|
|
|
|
|
{ label: 'Server Time', to: '/system' },
|
|
|
|
|
{ label: 'Statistics Software', to: '/settings' },
|
|
|
|
|
{ label: 'Terminal', to: '/system' },
|
|
|
|
|
{ label: 'Tweak Settings', to: '/settings' },
|
|
|
|
|
{ label: 'Update Preferences', to: '/settings' },
|
|
|
|
|
{ label: 'WHM Marketplace', to: '/settings' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'support',
|
|
|
|
|
label: 'Support',
|
|
|
|
|
icon: HelpCircle,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Grant NixPanel Support Access', to: '/security' },
|
|
|
|
|
{ label: 'Support Center', to: '/settings' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'networking',
|
|
|
|
|
label: 'Networking Setup',
|
|
|
|
|
icon: Network,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Change Hostname', to: '/security' },
|
|
|
|
|
{ label: 'Resolver Configuration', to: '/security' },
|
|
|
|
|
{ label: 'Security Center', to: '/security' },
|
|
|
|
|
{ label: 'Apache mod_userdir Tweak', to: '/webserver' },
|
|
|
|
|
{ label: 'SMTP Restrictions', to: '/email' },
|
|
|
|
|
{ label: 'Compiler Access', to: '/security' },
|
|
|
|
|
{ label: 'Configure Security Policies', to: '/security' },
|
|
|
|
|
{ label: 'mXSTOP Brute Force Protection', to: '/security' },
|
|
|
|
|
{ label: 'Host Access Control', to: '/security' },
|
|
|
|
|
{ label: 'Manage External Authentications', to: '/security' },
|
|
|
|
|
{ label: "Manage root's SSH Keys", to: '/security' },
|
|
|
|
|
{ label: 'Manage Wheel Group Users', to: '/security' },
|
|
|
|
|
{ label: 'ModSecurity™ Configuration', to: '/security' },
|
|
|
|
|
{ label: 'ModSecurity™ Tools', to: '/security' },
|
|
|
|
|
{ label: 'ModSecurity™ Vendors', to: '/security' },
|
|
|
|
|
{ label: 'Password Strength Configuration', to: '/security' },
|
|
|
|
|
{ label: 'Security Advisor', to: '/security' },
|
|
|
|
|
{ label: 'Security Questions', to: '/security' },
|
|
|
|
|
{ label: 'Shell Fork Bomb Protection', to: '/security' },
|
|
|
|
|
{ label: 'SSH Password Authorization Tweak', to: '/security' },
|
|
|
|
|
{ label: 'Traceroute Enable/Disable', to: '/security' },
|
|
|
|
|
{ label: 'Two-Factor Authentication', to: '/security' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'contacts',
|
|
|
|
|
label: 'Server Contacts',
|
|
|
|
|
icon: BookUser,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Contact Manager', to: '/settings' },
|
|
|
|
|
{ label: 'Edit System Mail Preferences', to: '/email' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'resellers',
|
|
|
|
|
label: 'Resellers',
|
|
|
|
|
icon: UserCog,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Change Ownership of an Account', to: '/resellers' },
|
|
|
|
|
{ label: 'Change Ownership of Multiple Accounts', to: '/resellers' },
|
|
|
|
|
{ label: 'Edit Reseller Nameservers and Privileges', to: '/resellers' },
|
|
|
|
|
{ label: 'Email All Resellers', to: '/resellers' },
|
|
|
|
|
{ label: "Manage Reseller's IP Delegation", to: '/resellers' },
|
|
|
|
|
{ label: "Manage Reseller's Shared IP", to: '/resellers' },
|
|
|
|
|
{ label: 'Reseller Center', to: '/resellers' },
|
|
|
|
|
{ label: 'Reset Resellers', to: '/resellers' },
|
|
|
|
|
{ label: 'Show Reseller Accounts', to: '/resellers' },
|
|
|
|
|
{ label: 'View Reseller Usage', to: '/resellers' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'service-config',
|
|
|
|
|
label: 'Service Configuration',
|
|
|
|
|
icon: Wrench,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Apache Configuration', to: '/webserver' },
|
|
|
|
|
{ label: 'Log Rotation Configuration', to: '/settings' },
|
|
|
|
|
{ label: 'Web Disk Configuration', to: '/settings' },
|
|
|
|
|
{ label: 'Web Services Configuration', to: '/settings' },
|
|
|
|
|
{ label: 'Exim Configuration Manager', to: '/email' },
|
|
|
|
|
{ label: 'FTP Server Selection', to: '/settings' },
|
|
|
|
|
{ label: 'Mailserver Configuration', to: '/email' },
|
|
|
|
|
{ label: 'Manage Service SSL Certificates', to: '/ssl' },
|
|
|
|
|
{ label: 'Nameserver Selection', to: '/dns' },
|
|
|
|
|
{ label: 'Service Manager', to: '/services' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'locales',
|
|
|
|
|
label: 'Locales',
|
|
|
|
|
icon: Languages,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Configure Application Locales', to: '/settings' },
|
|
|
|
|
{ label: 'Copy a Locale', to: '/settings' },
|
|
|
|
|
{ label: 'Delete a Locale', to: '/settings' },
|
|
|
|
|
{ label: 'Edit a Locale', to: '/settings' },
|
|
|
|
|
{ label: 'Locale XML Download', to: '/settings' },
|
|
|
|
|
{ label: 'Locale XML Upload', to: '/settings' },
|
|
|
|
|
{ label: 'View Available Locales', to: '/settings' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'backup',
|
|
|
|
|
label: 'Backup',
|
|
|
|
|
icon: HardDrive,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Backup Configuration', to: '/backup' },
|
|
|
|
|
{ label: 'Backup Restoration', to: '/backup' },
|
|
|
|
|
{ label: 'Backup User Selection', to: '/backup' },
|
|
|
|
|
{ label: 'File and Directory Restoration', to: '/backup' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'clusters',
|
|
|
|
|
label: 'Clusters',
|
|
|
|
|
icon: GitFork,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Configuration Cluster', to: '/settings' },
|
|
|
|
|
{ label: 'DNS Cluster', to: '/dns' },
|
|
|
|
|
{ label: 'Remote Access Key', to: '/security' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'reboot',
|
|
|
|
|
label: 'System Reboot',
|
|
|
|
|
icon: RotateCcw,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Forceful Server Reboot', to: '/system' },
|
|
|
|
|
{ label: 'Graceful Server Reboot', to: '/system' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'server-status',
|
|
|
|
|
label: 'Server Status',
|
|
|
|
|
icon: Activity,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Apache Status', to: '/webserver' },
|
|
|
|
|
{ label: 'Daily Process Log', to: '/system' },
|
|
|
|
|
{ label: 'Server Information',to: '/system' },
|
|
|
|
|
{ label: 'Service Status', to: '/services' },
|
|
|
|
|
{ label: 'Task Queue Monitor',to: '/system' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'account-info',
|
|
|
|
|
label: 'Account Information',
|
|
|
|
|
icon: Users,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'List Accounts', to: '/accounts/list' },
|
|
|
|
|
{ label: 'List Parked Domains', to: '/accounts/parked-domains'},
|
|
|
|
|
{ label: 'List Subdomains', to: '/accounts/subdomains' },
|
|
|
|
|
{ label: 'List Suspended Accounts', to: '/accounts/suspended' },
|
|
|
|
|
{ label: 'Show Accounts Over Quota', to: '/accounts/over-quota' },
|
|
|
|
|
{ label: 'View Bandwidth Usage', to: '/accounts/bandwidth' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'account-functions',
|
|
|
|
|
label: 'Account Functions',
|
|
|
|
|
icon: UserCheck,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: "Change Site's IP Address", to: '/accounts/change-ip' },
|
|
|
|
|
{ label: 'Create a New Account', to: '/accounts/create' },
|
|
|
|
|
{ label: 'Email All Users', to: '/accounts/email-users' },
|
|
|
|
|
{ label: 'Force Password Change', to: '/accounts/force-password' },
|
|
|
|
|
{ label: 'Limit Bandwidth Usage', to: '/accounts/limit-bandwidth' },
|
|
|
|
|
{ label: 'Manage Account Suspension', to: '/accounts/suspension' },
|
|
|
|
|
{ label: 'Manage Demo Mode', to: '/accounts/demo-mode' },
|
|
|
|
|
{ label: 'Manage Shell Access', to: '/accounts/shell-access' },
|
|
|
|
|
{ label: 'Modify an Account', to: '/accounts/modify' },
|
|
|
|
|
{ label: 'Password Modification', to: '/accounts/password' },
|
|
|
|
|
{ label: 'Quota Modification', to: '/accounts/quota' },
|
|
|
|
|
{ label: 'Raw Apache Log Download', to: '/accounts/apache-logs' },
|
|
|
|
|
{ label: 'Raw NGINX® Log Download', to: '/accounts/nginx-logs' },
|
|
|
|
|
{ label: 'Rearrange an Account', to: '/accounts/rearrange' },
|
|
|
|
|
{ label: 'Reset Account Bandwidth', to: '/accounts/reset-bandwidth' },
|
|
|
|
|
{ label: 'Terminate Accounts', to: '/accounts/terminate' },
|
|
|
|
|
{ label: 'Unsuspend Bandwidth Exceeders', to: '/accounts/unsuspend-bandwidth' },
|
|
|
|
|
{ label: 'Upgrade/Downgrade an Account', to: '/accounts/upgrade' },
|
|
|
|
|
{ label: 'Web Template Editor', to: '/accounts/web-template' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'multi-account',
|
|
|
|
|
label: 'Multi Account Functions',
|
|
|
|
|
icon: Users,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: "Change Multiple Sites' IP Addresses", to: '/accounts/bulk-ip' },
|
|
|
|
|
{ label: 'Modify/Upgrade Multiple Accounts', to: '/accounts/bulk-modify' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'transfers',
|
|
|
|
|
label: 'Transfers',
|
|
|
|
|
icon: ArrowRightLeft,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Convert Addon Domain to Account', to: '/accounts' },
|
|
|
|
|
{ label: 'Review Transfers and Restores', to: '/accounts' },
|
|
|
|
|
{ label: 'Transfer or Restore a cPanel Account', to: '/accounts' },
|
|
|
|
|
{ label: 'Transfer Tool', to: '/accounts' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'themes',
|
|
|
|
|
label: 'Themes',
|
|
|
|
|
icon: Paintbrush,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Theme Manager', to: '/settings' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'packages',
|
|
|
|
|
label: 'Packages',
|
|
|
|
|
icon: Package,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Add a Package', to: '/packages' },
|
|
|
|
|
{ label: 'Delete a Package', to: '/packages' },
|
|
|
|
|
{ label: 'Edit a Package', to: '/packages' },
|
|
|
|
|
{ label: 'Feature Manager', to: '/packages' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'dns',
|
|
|
|
|
label: 'DNS Functions',
|
|
|
|
|
icon: Globe,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Add a DNS Zone', to: '/dns' },
|
|
|
|
|
{ label: 'Add an A Entry for Hostname', to: '/dns' },
|
|
|
|
|
{ label: 'Delete a DNS Zone', to: '/dns' },
|
|
|
|
|
{ label: 'DNS Zone Manager', to: '/dns' },
|
|
|
|
|
{ label: 'Edit Zone Templates', to: '/dns' },
|
|
|
|
|
{ label: 'Email DNS Record Manager', to: '/dns' },
|
|
|
|
|
{ label: 'Email Routing Configuration', to: '/email' },
|
|
|
|
|
{ label: 'Enable DKIM/SPF Globally', to: '/email' },
|
|
|
|
|
{ label: 'Nameserver Record Report', to: '/dns' },
|
|
|
|
|
{ label: 'Park a Domain', to: '/dns' },
|
|
|
|
|
{ label: 'Perform a DNS Cleanup', to: '/dns' },
|
|
|
|
|
{ label: 'Set Zone TTL', to: '/dns' },
|
|
|
|
|
{ label: 'Setup/Edit Domain Forwarding',to: '/dns' },
|
|
|
|
|
{ label: 'Synchronize DNS Records', to: '/dns' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'databases',
|
|
|
|
|
label: 'Database Services',
|
|
|
|
|
icon: Database,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Change Database Root Password', to: '/settings' },
|
|
|
|
|
{ label: 'Change Database User Password', to: '/settings' },
|
|
|
|
|
{ label: 'Database Map Tool', to: '/settings' },
|
|
|
|
|
{ label: 'Edit Database Configuration', to: '/settings' },
|
|
|
|
|
{ label: 'Manage Database Access Hosts', to: '/settings' },
|
|
|
|
|
{ label: 'Manage Database Profiles', to: '/settings' },
|
|
|
|
|
{ label: 'Manage Database Users', to: '/settings' },
|
|
|
|
|
{ label: 'Manage Databases', to: '/settings' },
|
|
|
|
|
{ label: 'phpMyAdmin', to: '/settings' },
|
|
|
|
|
{ label: 'Repair Databases', to: '/settings' },
|
|
|
|
|
{ label: 'Show Database Processes', to: '/settings' },
|
|
|
|
|
{ label: 'Upgrade Database Version', to: '/settings' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'ip',
|
|
|
|
|
label: 'IP Functions',
|
|
|
|
|
icon: Wifi,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'IPv6 Ranges', to: '/security' },
|
|
|
|
|
{ label: 'Add a New IP Address', to: '/security' },
|
|
|
|
|
{ label: 'Assign IPv6 Address', to: '/security' },
|
|
|
|
|
{ label: 'Configure Remote Service IPs', to: '/security' },
|
|
|
|
|
{ label: 'IP Migration Wizard', to: '/security' },
|
|
|
|
|
{ label: 'Rebuild the IP Address Pool', to: '/security' },
|
|
|
|
|
{ label: 'Show IP Address Usage', to: '/security' },
|
|
|
|
|
{ label: 'Show or Delete Current IPs', to: '/security' },
|
|
|
|
|
{ label: 'Show/Edit Reserved IPs', to: '/security' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'software',
|
|
|
|
|
label: 'Software',
|
|
|
|
|
icon: Box,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Install a Perl Module', to: '/system' },
|
|
|
|
|
{ label: 'Install Distro Packages', to: '/system' },
|
|
|
|
|
{ label: 'Module Installers', to: '/system' },
|
|
|
|
|
{ label: 'MultiPHP INI Editor', to: '/php' },
|
|
|
|
|
{ label: 'MultiPHP Manager', to: '/php' },
|
|
|
|
|
{ label: 'NGINX® Manager', to: '/webserver' },
|
|
|
|
|
{ label: 'Rebuild RPM Database', to: '/system' },
|
|
|
|
|
{ label: 'System Update', to: '/system' },
|
|
|
|
|
{ label: 'Update Server Software', to: '/system' },
|
|
|
|
|
{ label: 'EasyApache 4', to: '/webserver' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'email',
|
|
|
|
|
label: 'Email',
|
|
|
|
|
icon: Mail,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Email Deliverability', to: '/email' },
|
|
|
|
|
{ label: 'Filter Incoming Emails by Country', to: '/email' },
|
|
|
|
|
{ label: 'Filter Incoming Emails by Domain', to: '/email' },
|
|
|
|
|
{ label: 'Greylisting', to: '/email' },
|
|
|
|
|
{ label: 'Mail Delivery Reports', to: '/email' },
|
|
|
|
|
{ label: 'Mail Queue Manager', to: '/email' },
|
|
|
|
|
{ label: 'Mail Troubleshooter', to: '/email' },
|
|
|
|
|
{ label: 'Mailbox Conversion', to: '/email' },
|
|
|
|
|
{ label: 'Repair Mailbox Permissions', to: '/email' },
|
|
|
|
|
{ label: 'Spamd Startup Configuration', to: '/email' },
|
|
|
|
|
{ label: 'View Mail Statistics Summary', to: '/email' },
|
|
|
|
|
{ label: 'View Relayers', to: '/email' },
|
|
|
|
|
{ label: 'View Sent Summary', to: '/email' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'system-health',
|
|
|
|
|
label: 'System Health',
|
|
|
|
|
icon: HeartPulse,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Background Process Killer', to: '/system' },
|
|
|
|
|
{ label: 'Process Manager', to: '/system' },
|
|
|
|
|
{ label: 'Show Current Disk Usage', to: '/system' },
|
|
|
|
|
{ label: 'Show Current Running Processes', to: '/system' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'nixpanel',
|
|
|
|
|
label: 'NixPanel',
|
|
|
|
|
icon: LayoutDashboard,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Change Log', to: '/settings' },
|
|
|
|
|
{ label: 'Customization', to: '/settings' },
|
|
|
|
|
{ label: 'Manage Plugins', to: '/settings' },
|
|
|
|
|
{ label: 'Modify NixPanel News', to: '/settings' },
|
|
|
|
|
{ label: 'Reset a Mailman Password', to: '/email' },
|
|
|
|
|
{ label: 'Upgrade to Latest Version', to: '/settings' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'ssl',
|
|
|
|
|
label: 'SSL/TLS',
|
|
|
|
|
icon: Lock,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Generate an SSL Certificate and Signing Request', to: '/ssl' },
|
|
|
|
|
{ label: 'Install an SSL Certificate on a Domain', to: '/ssl' },
|
|
|
|
|
{ label: 'Manage AutoSSL', to: '/ssl' },
|
|
|
|
|
{ label: 'Manage SSL Hosts', to: '/ssl' },
|
|
|
|
|
{ label: 'Purchase and Install an SSL Certificate', to: '/ssl' },
|
|
|
|
|
{ label: 'SSL Storage Manager', to: '/ssl' },
|
|
|
|
|
{ label: 'SSL/TLS Configuration', to: '/ssl' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'market',
|
|
|
|
|
label: 'Market',
|
|
|
|
|
icon: ShoppingBag,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Market Provider Manager', to: '/settings' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'restart-services',
|
|
|
|
|
label: 'Restart Services',
|
|
|
|
|
icon: RefreshCw,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Database Server', to: '/services' },
|
|
|
|
|
{ label: 'DNS Server', to: '/services' },
|
|
|
|
|
{ label: 'HTTP Server (Apache)', to: '/services' },
|
|
|
|
|
{ label: 'IMAP Server', to: '/services' },
|
|
|
|
|
{ label: 'Mail Server (Exim)', to: '/services' },
|
|
|
|
|
{ label: 'Mailing List Manager (Mailman)', to: '/services' },
|
|
|
|
|
{ label: 'PHP-FPM service for Apache', to: '/services' },
|
|
|
|
|
{ label: 'SSH Server (OpenSSH)', to: '/services' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'development',
|
|
|
|
|
label: 'Development',
|
|
|
|
|
icon: Code2,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Apps Managed by AppConfig', to: '/settings' },
|
|
|
|
|
{ label: 'NixPanel Development Forum', to: '/settings' },
|
|
|
|
|
{ label: 'NixPanel Plugin File Generator', to: '/settings' },
|
|
|
|
|
{ label: 'Developer Documentation', to: '/settings' },
|
|
|
|
|
{ label: 'Manage API Tokens', to: '/settings' },
|
|
|
|
|
{ label: 'Manage Hooks', to: '/settings' },
|
|
|
|
|
{ label: 'OpenAPI Documentation for NixPanel', to: '/settings' },
|
|
|
|
|
{ label: 'OpenAPI Documentation for WHM', to: '/settings' },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'plugins',
|
|
|
|
|
label: 'Plugins',
|
|
|
|
|
icon: Puzzle,
|
|
|
|
|
items: [
|
|
|
|
|
{ label: 'Backuply by Softaculous', to: '/backup' },
|
|
|
|
|
{ label: 'ImunifyAV', to: '/security' },
|
|
|
|
|
{ label: 'Server Monitoring', to: '/system' },
|
|
|
|
|
{ label: 'SitePad Website Builder', to: '/settings' },
|
|
|
|
|
{ label: 'Softaculous - Instant Installs', to: '/settings' },
|
|
|
|
|
{ label: 'WP Toolkit', to: '/settings' },
|
|
|
|
|
],
|
|
|
|
|
},
|
2026-04-05 10:45:21 -05:00
|
|
|
]
|
|
|
|
|
|
2026-04-11 11:51:18 -05:00
|
|
|
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
|
|
|
|
|
|
|
|
|
function isItemActive(to: string, pathname: string) {
|
|
|
|
|
if (to === '/') return pathname === '/'
|
|
|
|
|
return pathname === to || pathname.startsWith(to + '/')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ─── Component ───────────────────────────────────────────────────────────────
|
|
|
|
|
|
2026-04-05 10:45:21 -05:00
|
|
|
export default function Layout() {
|
|
|
|
|
const { user, logout } = useAuth()
|
|
|
|
|
const navigate = useNavigate()
|
2026-04-11 11:51:18 -05:00
|
|
|
const location = useLocation()
|
|
|
|
|
|
2026-04-05 10:45:21 -05:00
|
|
|
const [sidebarOpen, setSidebarOpen] = useState(true)
|
2026-04-11 11:51:18 -05:00
|
|
|
const [search, setSearch] = useState('')
|
2026-04-11 11:55:25 -05:00
|
|
|
|
|
|
|
|
// ── Version / upgrade state ──────────────────────────────────────────────
|
|
|
|
|
type VersionInfo = { currentVersion: string; latestVersion: string | null; updateAvailable: boolean }
|
|
|
|
|
const [versionInfo, setVersionInfo] = useState<VersionInfo | null>(null)
|
|
|
|
|
const [upgradeState, setUpgradeState] = useState<'idle' | 'confirm' | 'running' | 'done' | 'error'>('idle')
|
|
|
|
|
|
|
|
|
|
const fetchVersion = useCallback(async () => {
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await axios.get('/api/nixserver/system/version')
|
|
|
|
|
setVersionInfo(data.data)
|
|
|
|
|
} catch { /* non-fatal */ }
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
useEffect(() => { fetchVersion() }, [fetchVersion])
|
|
|
|
|
|
|
|
|
|
const handleUpgrade = async () => {
|
|
|
|
|
if (upgradeState === 'confirm') {
|
|
|
|
|
setUpgradeState('running')
|
|
|
|
|
try {
|
|
|
|
|
await axios.post('/api/nixserver/system/upgrade')
|
|
|
|
|
setUpgradeState('done')
|
|
|
|
|
} catch {
|
|
|
|
|
setUpgradeState('error')
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
setUpgradeState('confirm')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ─────────────────────────────────────────────────────────────────────────
|
|
|
|
|
|
2026-04-11 11:51:18 -05:00
|
|
|
const [openCats, setOpenCats] = useState<Set<string>>(() => {
|
|
|
|
|
// Auto-open the category that contains the active route on first render
|
|
|
|
|
const active = NAV.find(cat =>
|
|
|
|
|
cat.items.some(item => isItemActive(item.to, location.pathname))
|
|
|
|
|
)
|
|
|
|
|
return active ? new Set([active.id]) : new Set()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// When the route changes (e.g. user navigates), auto-open the matching category
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const active = NAV.find(cat =>
|
|
|
|
|
cat.items.some(item => isItemActive(item.to, location.pathname))
|
|
|
|
|
)
|
|
|
|
|
if (active) {
|
|
|
|
|
setOpenCats(prev => prev.has(active.id) ? prev : new Set([...prev, active.id]))
|
|
|
|
|
}
|
|
|
|
|
}, [location.pathname])
|
|
|
|
|
|
|
|
|
|
const toggleCat = (id: string) => {
|
|
|
|
|
setOpenCats(prev => {
|
|
|
|
|
const next = new Set(prev)
|
|
|
|
|
next.has(id) ? next.delete(id) : next.add(id)
|
|
|
|
|
return next
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Filter nav based on search query
|
|
|
|
|
const filteredNav = useMemo(() => {
|
|
|
|
|
const q = search.trim().toLowerCase()
|
|
|
|
|
if (!q) return NAV
|
|
|
|
|
return NAV.map(cat => ({
|
|
|
|
|
...cat,
|
|
|
|
|
items: cat.items.filter(item => item.label.toLowerCase().includes(q)),
|
|
|
|
|
})).filter(cat =>
|
|
|
|
|
cat.items.length > 0 || cat.label.toLowerCase().includes(q)
|
|
|
|
|
)
|
|
|
|
|
}, [search])
|
|
|
|
|
|
|
|
|
|
// When searching, all matching categories are forced open
|
|
|
|
|
const effectiveOpen = (id: string) =>
|
|
|
|
|
search.trim() ? filteredNav.some(c => c.id === id) : openCats.has(id)
|
2026-04-05 10:45:21 -05:00
|
|
|
|
|
|
|
|
const handleLogout = async () => {
|
|
|
|
|
await logout()
|
|
|
|
|
navigate('/login')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="flex h-screen overflow-hidden bg-[#0f1117]">
|
2026-04-11 11:51:18 -05:00
|
|
|
|
|
|
|
|
{/* ── Sidebar ─────────────────────────────────────────────────────── */}
|
2026-04-05 10:45:21 -05:00
|
|
|
<aside
|
2026-04-11 11:51:18 -05:00
|
|
|
className={`flex flex-col transition-all duration-200 bg-[#1a1d27] border-r border-[#2a2d3e] overflow-hidden flex-shrink-0 ${
|
|
|
|
|
sidebarOpen ? 'w-72' : 'w-0'
|
2026-04-05 10:45:21 -05:00
|
|
|
}`}
|
|
|
|
|
>
|
2026-04-11 11:51:18 -05:00
|
|
|
{/* Branding */}
|
|
|
|
|
<div className="flex items-center gap-2 px-4 py-4 border-b border-[#2a2d3e] min-h-[57px] flex-shrink-0">
|
2026-04-05 10:45:21 -05:00
|
|
|
<div className="w-7 h-7 rounded-lg bg-indigo-600 flex items-center justify-center flex-shrink-0">
|
|
|
|
|
<span className="text-white text-xs font-bold">N</span>
|
|
|
|
|
</div>
|
2026-04-11 11:51:18 -05:00
|
|
|
<div className="overflow-hidden">
|
|
|
|
|
<p className="text-white text-sm font-semibold leading-tight whitespace-nowrap">NixServer</p>
|
|
|
|
|
<p className="text-[#64748b] text-xs whitespace-nowrap">Admin Panel</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Search */}
|
|
|
|
|
<div className="px-3 py-2 border-b border-[#2a2d3e] flex-shrink-0">
|
|
|
|
|
<div className="relative">
|
|
|
|
|
<Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[#4a5568] pointer-events-none" />
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="Search..."
|
|
|
|
|
value={search}
|
|
|
|
|
onChange={e => setSearch(e.target.value)}
|
|
|
|
|
className="w-full bg-[#0f1117] border border-[#2a2d3e] rounded-md text-xs text-[#94a3b8] placeholder-[#4a5568] pl-7 pr-3 py-1.5 focus:outline-none focus:border-indigo-500 transition-colors"
|
|
|
|
|
/>
|
|
|
|
|
{search && (
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => setSearch('')}
|
|
|
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-[#4a5568] hover:text-[#94a3b8]"
|
|
|
|
|
>
|
|
|
|
|
<X size={11} />
|
|
|
|
|
</button>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
2026-04-05 10:45:21 -05:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Nav */}
|
2026-04-11 11:51:18 -05:00
|
|
|
<nav className="flex-1 overflow-y-auto py-1 scrollbar-thin">
|
|
|
|
|
|
|
|
|
|
{/* Dashboard — always at the top */}
|
|
|
|
|
<Link
|
|
|
|
|
to="/"
|
|
|
|
|
className={`flex items-center gap-2.5 px-3 py-1.5 mx-2 my-0.5 rounded-md text-xs transition-colors ${
|
|
|
|
|
location.pathname === '/'
|
|
|
|
|
? 'bg-indigo-600/20 text-indigo-400'
|
|
|
|
|
: 'text-[#94a3b8] hover:bg-[#1e2130] hover:text-white'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
<LayoutDashboard size={13} className="flex-shrink-0" />
|
|
|
|
|
<span className="truncate">Dashboard</span>
|
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
|
|
{/* Categories */}
|
|
|
|
|
{filteredNav.map(cat => {
|
|
|
|
|
const isOpen = effectiveOpen(cat.id)
|
|
|
|
|
const Icon = cat.icon
|
|
|
|
|
const hasActive = cat.items.some(item => isItemActive(item.to, location.pathname))
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div key={cat.id} className="mx-2 my-0.5">
|
|
|
|
|
{/* Category header */}
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => !search.trim() && toggleCat(cat.id)}
|
|
|
|
|
className={`flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-xs font-medium transition-colors ${
|
|
|
|
|
hasActive && !search.trim()
|
|
|
|
|
? 'text-indigo-300'
|
|
|
|
|
: 'text-[#64748b] hover:text-[#94a3b8]'
|
|
|
|
|
} ${search.trim() ? 'cursor-default' : ''}`}
|
|
|
|
|
>
|
|
|
|
|
<Icon size={13} className="flex-shrink-0" />
|
|
|
|
|
<span className="flex-1 text-left truncate">{cat.label}</span>
|
|
|
|
|
{!search.trim() && (
|
|
|
|
|
isOpen
|
|
|
|
|
? <ChevronDown size={11} className="flex-shrink-0 opacity-60" />
|
|
|
|
|
: <ChevronRight size={11} className="flex-shrink-0 opacity-60" />
|
|
|
|
|
)}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
{/* Items */}
|
|
|
|
|
{isOpen && (
|
|
|
|
|
<div className="ml-3 pl-2 border-l border-[#2a2d3e] mt-0.5 mb-1">
|
|
|
|
|
{cat.items.map(item => {
|
|
|
|
|
const active = isItemActive(item.to, location.pathname)
|
|
|
|
|
return (
|
|
|
|
|
<Link
|
|
|
|
|
key={item.label}
|
|
|
|
|
to={item.to}
|
|
|
|
|
className={`block px-2 py-1 rounded text-xs transition-colors truncate ${
|
|
|
|
|
active
|
|
|
|
|
? 'text-indigo-400 bg-indigo-600/10'
|
|
|
|
|
: 'text-[#64748b] hover:text-[#94a3b8] hover:bg-[#1e2130]'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{item.label}
|
|
|
|
|
</Link>
|
|
|
|
|
)
|
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
})}
|
|
|
|
|
|
|
|
|
|
{/* Empty search state */}
|
|
|
|
|
{search.trim() && filteredNav.length === 0 && (
|
|
|
|
|
<p className="text-center text-[#4a5568] text-xs py-6">No results</p>
|
|
|
|
|
)}
|
2026-04-05 10:45:21 -05:00
|
|
|
</nav>
|
|
|
|
|
|
2026-04-11 11:55:25 -05:00
|
|
|
{/* Version + upgrade */}
|
|
|
|
|
<div className="border-t border-[#2a2d3e] px-3 pt-2.5 pb-1 flex-shrink-0">
|
|
|
|
|
{versionInfo ? (
|
|
|
|
|
<div className="space-y-1.5">
|
|
|
|
|
{/* Version row */}
|
|
|
|
|
<div className="flex items-center justify-between px-1">
|
|
|
|
|
<div className="flex items-center gap-1.5">
|
|
|
|
|
{versionInfo.updateAvailable ? (
|
|
|
|
|
<AlertCircle size={11} className="text-amber-400 flex-shrink-0" />
|
|
|
|
|
) : (
|
|
|
|
|
<CheckCircle2 size={11} className="text-emerald-500 flex-shrink-0" />
|
|
|
|
|
)}
|
|
|
|
|
<span className="text-[#64748b] text-[10px]">
|
|
|
|
|
v{versionInfo.currentVersion}
|
|
|
|
|
</span>
|
|
|
|
|
{versionInfo.updateAvailable && versionInfo.latestVersion && (
|
|
|
|
|
<span className="text-amber-400 text-[10px]">
|
|
|
|
|
→ v{versionInfo.latestVersion}
|
|
|
|
|
</span>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<button
|
|
|
|
|
onClick={fetchVersion}
|
|
|
|
|
title="Check for updates"
|
|
|
|
|
className="text-[#4a5568] hover:text-[#94a3b8] transition-colors"
|
|
|
|
|
>
|
|
|
|
|
<RefreshCcw size={10} />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Upgrade button */}
|
|
|
|
|
{upgradeState === 'done' ? (
|
|
|
|
|
<div className="flex items-center gap-1.5 px-2 py-1.5 rounded-md bg-emerald-600/10 text-emerald-400 text-[10px]">
|
|
|
|
|
<CheckCircle2 size={11} />
|
|
|
|
|
<span>Upgrade started — panel restarting…</span>
|
|
|
|
|
</div>
|
|
|
|
|
) : upgradeState === 'error' ? (
|
|
|
|
|
<div className="flex items-center gap-1.5 px-2 py-1.5 rounded-md bg-red-600/10 text-red-400 text-[10px]">
|
|
|
|
|
<AlertCircle size={11} />
|
|
|
|
|
<span>Upgrade failed — check logs</span>
|
|
|
|
|
</div>
|
|
|
|
|
) : (
|
|
|
|
|
<div className="flex gap-1.5">
|
|
|
|
|
<button
|
|
|
|
|
onClick={handleUpgrade}
|
|
|
|
|
disabled={upgradeState === 'running'}
|
|
|
|
|
className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[10px] font-medium transition-colors ${
|
|
|
|
|
upgradeState === 'confirm'
|
|
|
|
|
? 'bg-amber-500/20 text-amber-300 hover:bg-amber-500/30'
|
|
|
|
|
: versionInfo.updateAvailable
|
|
|
|
|
? 'bg-indigo-600/20 text-indigo-300 hover:bg-indigo-600/30'
|
|
|
|
|
: 'bg-[#1e2130] text-[#64748b] hover:text-[#94a3b8]'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{upgradeState === 'running' ? (
|
|
|
|
|
<><Loader2 size={10} className="animate-spin" /><span>Upgrading…</span></>
|
|
|
|
|
) : upgradeState === 'confirm' ? (
|
|
|
|
|
<><ArrowUpCircle size={10} /><span>Confirm upgrade</span></>
|
|
|
|
|
) : versionInfo.updateAvailable ? (
|
|
|
|
|
<><ArrowUpCircle size={10} /><span>Upgrade available</span></>
|
|
|
|
|
) : (
|
|
|
|
|
<><ArrowUpCircle size={10} /><span>Upgrade panel</span></>
|
|
|
|
|
)}
|
|
|
|
|
</button>
|
|
|
|
|
{upgradeState === 'confirm' && (
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => setUpgradeState('idle')}
|
|
|
|
|
className="px-2 py-1.5 rounded-md bg-[#1e2130] text-[#64748b] hover:text-[#94a3b8] text-[10px] transition-colors"
|
|
|
|
|
>
|
|
|
|
|
Cancel
|
|
|
|
|
</button>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
) : (
|
|
|
|
|
<div className="flex items-center gap-1.5 px-1 py-1">
|
|
|
|
|
<Loader2 size={10} className="animate-spin text-[#4a5568]" />
|
|
|
|
|
<span className="text-[#4a5568] text-[10px]">Checking version…</span>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-04-05 10:45:21 -05:00
|
|
|
{/* User + logout */}
|
2026-04-11 11:51:18 -05:00
|
|
|
<div className="border-t border-[#2a2d3e] p-3 flex-shrink-0">
|
|
|
|
|
<div className="px-1 mb-2">
|
|
|
|
|
<p className="text-white text-xs font-medium truncate">{user?.username}</p>
|
|
|
|
|
<p className="text-[#64748b] text-xs truncate">{user?.role}</p>
|
|
|
|
|
</div>
|
2026-04-05 10:45:21 -05:00
|
|
|
<button
|
|
|
|
|
onClick={handleLogout}
|
2026-04-11 11:51:18 -05:00
|
|
|
className="flex items-center gap-2 px-3 py-2 w-full rounded-lg text-[#94a3b8] hover:bg-[#1e2130] hover:text-red-400 transition-colors text-xs"
|
2026-04-05 10:45:21 -05:00
|
|
|
>
|
2026-04-11 11:51:18 -05:00
|
|
|
<LogOut size={14} className="flex-shrink-0" />
|
|
|
|
|
<span>Logout</span>
|
2026-04-05 10:45:21 -05:00
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</aside>
|
|
|
|
|
|
2026-04-11 11:51:18 -05:00
|
|
|
{/* ── Main ────────────────────────────────────────────────────────── */}
|
|
|
|
|
<div className="flex-1 flex flex-col overflow-hidden min-w-0">
|
2026-04-05 10:45:21 -05:00
|
|
|
{/* Topbar */}
|
2026-04-11 11:51:18 -05:00
|
|
|
<header className="flex items-center gap-4 px-6 py-3 bg-[#1a1d27] border-b border-[#2a2d3e] min-h-[57px] flex-shrink-0">
|
2026-04-05 10:45:21 -05:00
|
|
|
<button
|
|
|
|
|
onClick={() => setSidebarOpen(v => !v)}
|
|
|
|
|
className="text-[#64748b] hover:text-white transition-colors"
|
|
|
|
|
>
|
|
|
|
|
{sidebarOpen ? <X size={18} /> : <Menu size={18} />}
|
|
|
|
|
</button>
|
|
|
|
|
<div className="flex-1" />
|
|
|
|
|
<span className="text-[#64748b] text-xs">
|
|
|
|
|
{new Date().toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}
|
|
|
|
|
</span>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
{/* Content */}
|
|
|
|
|
<main className="flex-1 overflow-y-auto p-6">
|
|
|
|
|
<Outlet />
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
