router-lists-ui/frontend/src/App.jsx

import { useState } from 'react';
import { Container, Navbar, Tabs, Tab } from 'react-bootstrap';
import { 
  IconBrandTabler, 
  IconWorld, 
  IconNetwork, 
  IconSettings,
  IconMenu2,
  IconX,
  IconHome,
  IconDatabase,
  IconUsers,
  IconBell,
  IconSearch,
  IconChevronDown,
  IconLogout,
  IconUser,
  IconDashboard,
  IconFileText,
  IconCloud,
  IconShield,
  IconActivity
} from '@tabler/icons-react';
import DataManager from './DataManager';
import './App.css';

function App() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('dashboard');
  const [notifications] = useState([
    { id: 1, title: 'Новый домен добавлен', message: 'example.com был добавлен в список', time: '2 мин назад' },
    { id: 2, title: 'Изменения сохранены', message: 'Список AS обновлен в S3', time: '5 мин назад' }
  ]);

  const toggleSidebar = () => setSidebarOpen(!sidebarOpen);

  const sidebarItems = [
    { id: 'dashboard', title: 'Dashboard', icon: IconDashboard, badge: null },
    { id: 'domains', title: 'Домены', icon: IconWorld, badge: '12' },
    { id: 'asns', title: 'AS', icon: IconNetwork, badge: '8' },
    { id: 'files', title: 'Файлы', icon: IconFileText, badge: null },
    { id: 'cloud', title: 'Облако', icon: IconCloud, badge: null },
    { id: 'security', title: 'Безопасность', icon: IconShield, badge: null },
    { id: 'activity', title: 'Активность', icon: IconActivity, badge: '3' },
    { id: 'settings', title: 'Настройки', icon: IconSettings, badge: null }
  ];

  const renderContent = () => {
    switch (activeTab) {
      case 'dashboard':
        return <Dashboard />;
      case 'domains':
        return (
          <DataManager 
            entityName="домен"
            entityKey="domains"
            placeholder="example.com"
          />
        );
      case 'asns':
        return (
          <DataManager 
            entityName="AS"
            entityKey="asns"
            placeholder="AS12345"
          />
        );
      default:
        return <Dashboard />;
    }
  };

  const getPageTitle = () => {
    const item = sidebarItems.find(item => item.id === activeTab);
    return item ? item.title : 'Dashboard';
  };

  return (
    <div className="page">
      {/* Sidebar */}
      <aside className={`navbar navbar-vertical navbar-expand-lg ${sidebarOpen ? 'navbar-show' : ''}`}>
        <div className="container-fluid">
          <button 
            className="navbar-toggler" 
            type="button" 
            onClick={toggleSidebar}
          >
            <IconX className="icon" />
          </button>
          
          <h1 className="navbar-brand navbar-brand-autodark">
            <IconBrandTabler className="navbar-brand-icon me-2" />
            S3 Lists Manager
          </h1>

          <div className="navbar-nav flex-row d-lg-none">
            <div className="nav-item dropdown">
              <a href="#" className="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown">
                <span className="avatar avatar-sm" style={{backgroundImage: 'url(./static/avatars/000m.jpg)'}}></span>
              </a>
              <div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                <a href="#" className="dropdown-item">Profile</a>
                <a href="#" className="dropdown-item">Settings</a>
                <div className="dropdown-divider"></div>
                <a href="#" className="dropdown-item">Logout</a>
              </div>
            </div>
          </div>

          <div className="collapse navbar-collapse" id="sidebar-menu">
            <ul className="navbar-nav pt-lg-auto">
              {sidebarItems.map((item) => (
                <li key={item.id} className="nav-item">
                  <a 
                    className={`nav-link ${activeTab === item.id ? 'active' : ''}`}
                    href="#"
                    onClick={(e) => { e.preventDefault(); setActiveTab(item.id); }}
                  >
                    <item.icon className="nav-link-icon" />
                    <span className="nav-link-title">{item.title}</span>
                    {item.badge && (
                      <span className="badge badge-sm bg-green-lt text-green ms-auto">
                        {item.badge}
                      </span>
                    )}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </aside>

      {/* Header */}
      <header className="navbar navbar-expand-md navbar-light d-none d-lg-flex d-print-none">
        <div className="container-xl">
          <button 
            className="navbar-toggler" 
            type="button" 
            onClick={toggleSidebar}
          >
            <IconMenu2 className="icon" />
          </button>

          <div className="navbar-nav flex-row order-md-last">
            <div className="nav-item dropdown d-none d-md-flex me-3">
              <a href="#" className="nav-link px-0" data-bs-toggle="dropdown" tabIndex="-1">
                <IconBell className="icon" />
                <span className="badge badge-sm bg-red"></span>
              </a>
              <div className="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
                <div className="card">
                  <div className="card-header">
                    <h3 className="card-title">Уведомления</h3>
                  </div>
                  <div className="list-group list-group-flush">
                    {notifications.map((notification) => (
                      <div key={notification.id} className="list-group-item">
                        <div className="row align-items-center">
                          <div className="col-auto">
                            <span className="status-dot status-dot-animated bg-red d-block"></span>
                          </div>
                          <div className="col text-truncate">
                            <a href="#" className="text-body d-block">{notification.title}</a>
                            <div className="d-block text-muted text-truncate mt-n1">
                              {notification.message}
                            </div>
                          </div>
                          <div className="col-auto">
                            <a href="#" className="list-group-item-actions">
                              <IconX className="icon" />
                            </a>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            <div className="nav-item dropdown">
              <a href="#" className="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown">
                <span className="avatar avatar-sm" style={{backgroundImage: 'url(./static/avatars/000m.jpg)'}}></span>
                <span className="d-none d-xl-block ps-2">
                  <span>Admin User</span>
                  <IconChevronDown className="icon" />
                </span>
              </a>
              <div className="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                <a href="#" className="dropdown-item">
                  <IconUser className="icon me-2" />
                  Profile
                </a>
                <a href="#" className="dropdown-item">
                  <IconSettings className="icon me-2" />
                  Settings
                </a>
                <div className="dropdown-divider"></div>
                <a href="#" className="dropdown-item">
                  <IconLogout className="icon me-2" />
                  Logout
                </a>
              </div>
            </div>
          </div>

          <div className="navbar-nav flex-row">
            <div className="nav-item d-none d-md-flex me-3">
              <div className="input-icon">
                <IconSearch className="icon" />
                <input type="text" className="form-control" placeholder="Поиск..." />
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <div className="page-wrapper">
        <div className="container-xl">
          {/* Page Header */}
          <div className="page-header d-print-none">
            <div className="row align-items-center">
              <div className="col">
                <div className="page-pretitle">
                  S3 Lists Manager
                </div>
                <h2 className="page-title">
                  {getPageTitle()}
                </h2>
              </div>
              <div className="col-auto ms-auto d-print-none">
                <div className="btn-list">
                  <span className="d-none d-sm-inline">
                    <a href="#" className="btn btn-white">
                      Новый домен
                    </a>
                  </span>
                  <a href="#" className="btn btn-primary d-none d-sm-inline-block">
                    <IconDatabase className="icon me-2" />
                    Сохранить в S3
                  </a>
                </div>
              </div>
            </div>
            {/* Breadcrumbs */}
            <div className="page-header-breadcrumb">
              <ol className="breadcrumb">
                <li className="breadcrumb-item">
                  <a href="#" onClick={(e) => { e.preventDefault(); setActiveTab('dashboard'); }}>
                    <IconHome className="icon me-2" />
                    Главная
                  </a>
                </li>
                <li className="breadcrumb-item active" aria-current="page">
                  {getPageTitle()}
                </li>
              </ol>
            </div>
          </div>
        </div>

        <div className="page-body">
          <div className="container-xl">
            {renderContent()}
          </div>
        </div>

        {/* Footer */}
        <footer className="footer footer-transparent d-print-none">
          <div className="container-xl">
            <div className="row text-center align-items-center flex-row-reverse">
              <div className="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul className="list-inline list-inline-dots mb-0">
                  <li className="list-inline-item">
                    Copyright &copy; 2024
                    <a href="." className="link-secondary">S3 Lists Manager</a>.
                    All rights reserved.
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
  );
}

// Dashboard Component
function Dashboard() {
  const stats = [
    { title: 'Всего доменов', value: '1,234', icon: IconWorld, color: 'blue' },
    { title: 'Всего AS', value: '567', icon: IconNetwork, color: 'green' },
    { title: 'Активные шлюзы', value: '12', icon: IconDatabase, color: 'orange' },
    { title: 'Последние изменения', value: '3', icon: IconActivity, color: 'red' }
  ];

  return (
    <div className="row row-deck row-cards">
      {/* Stats Cards */}
      {stats.map((stat, index) => (
        <div key={index} className="col-sm-6 col-lg-3">
          <div className="card">
            <div className="card-body">
              <div className="d-flex align-items-center">
                <div className="subheader">{stat.title}</div>
              </div>
              <div className="h1 mb-3">{stat.value}</div>
              <div className="d-flex mb-2">
                <stat.icon className={`icon icon-sm text-${stat.color}`} />
              </div>
            </div>
          </div>
        </div>
      ))}

      {/* Main Content Card */}
      <div className="col-12">
        <div className="card">
          <div className="card-header">
            <h3 className="card-title">Добро пожаловать в S3 Lists Manager</h3>
          </div>
          <div className="card-body">
            <p>Выберите раздел в боковом меню для управления списками доменов и AS.</p>
            <div className="row">
              <div className="col-md-6">
                <div className="card card-sm">
                  <div className="card-body">
                    <div className="row align-items-center">
                      <div className="col-auto">
                        <IconWorld className="icon icon-lg text-blue" />
                      </div>
                      <div className="col">
                        <div className="font-weight-medium">
                          Управление доменами
                        </div>
                        <div className="text-muted">
                          Добавляйте, редактируйте и управляйте списками доменов
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-md-6">
                <div className="card card-sm">
                  <div className="card-body">
                    <div className="row align-items-center">
                      <div className="col-auto">
                        <IconNetwork className="icon icon-lg text-green" />
                      </div>
                      <div className="col">
                        <div className="font-weight-medium">
                          Управление AS
                        </div>
                        <div className="text-muted">
                          Добавляйте, редактируйте и управляйте списками AS
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;