pg-adminus/public/modules/admin/admin-panel.html

<!-- Admin Panel Module -->
<div id="adminModule" class="admin-module hidden h-screen flex flex-col">
    <!-- Header (same as dashboard) -->
    <header class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 h-16 flex items-center justify-between px-4 sm:px-6 shadow-sm z-10">
        <div class="flex items-center gap-4">
            <button id="toggleAdminSidebar" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg md:hidden">
                <i data-lucide="menu" class="w-6 h-6"></i>
            </button>
            <div class="flex items-center gap-2 text-blue-600 dark:text-blue-400">
                <i data-lucide="shield-admin" class="w-6 h-6"></i>
                <span class="font-bold text-lg hidden sm:inline">Администрирование</span>
            </div>
        </div>
        
        <div class="flex items-center gap-3">
            <button id="toggleAdminTheme" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors" title="Переключить тему">
                <i data-lucide="moon" class="w-5 h-5 dark:hidden"></i>
                <i data-lucide="sun" class="w-5 h-5 hidden dark:block"></i>
            </button>
            <div class="h-6 w-px bg-slate-200 dark:bg-slate-700 hidden sm:block"></div>
            <button id="adminLogoutBtn" class="p-2 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors" title="Выход">
                <i data-lucide="log-out" class="w-5 h-5 text-red-500"></i>
            </button>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- Admin Sidebar -->
        <aside id="adminSidebar" class="fixed md:static inset-y-16 left-0 w-64 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 overflow-y-auto transform -translate-x-full md:translate-x-0 transition-transform z-40">
            <nav class="p-4 space-y-2">
                <h3 class="px-4 py-2 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Управление</h3>
                
                <a href="#admin-overview" class="nav-item active flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                    <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
                    <span>Обзор</span>
                </a>
                
                <a href="#admin-users" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                    <i data-lucide="users" class="w-5 h-5"></i>
                    <span>Пользователи</span>
                </a>

                <a href="#admin-roles" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                    <i data-lucide="shield" class="w-5 h-5"></i>
                    <span>Роли и права</span>
                </a>

                <a href="#admin-logs" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                    <i data-lucide="file-text" class="w-5 h-5"></i>
                    <span>Логи</span>
                </a>

                <div class="my-4 h-px bg-slate-200 dark:bg-slate-700"></div>
                
                <h3 class="px-4 py-2 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Система</h3>

                <a href="#admin-database" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                    <i data-lucide="database" class="w-5 h-5"></i>
                    <span>База данных</span>
                </a>

                <a href="#admin-settings" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                    <i data-lucide="settings" class="w-5 h-5"></i>
                    <span>Настройки</span>
                </a>

                <a href="#admin-backups" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                    <i data-lucide="download" class="w-5 h-5"></i>
                    <span>Резервные копии</span>
                </a>

                <a href="#dashboard" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors text-blue-600 dark:text-blue-400">
                    <i data-lucide="arrow-left" class="w-5 h-5"></i>
                    <span>К панели</span>
                </a>
            </nav>
        </aside>

        <!-- Admin Content -->
        <main id="adminContent" class="flex-1 overflow-auto">
            <div class="p-4 sm:p-6 space-y-6">
                <!-- Users Section -->
                <section id="usersSection" class="space-y-4">
                    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-4">
                        <div>
                            <h2 class="text-2xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
                                <i data-lucide="users" class="w-6 h-6"></i>
                                Управление пользователями
                            </h2>
                            <p class="text-slate-500 dark:text-slate-400 text-sm mt-1">Добавляйте, редактируйте и удаляйте администраторов</p>
                        </div>
                        <button id="addUserBtn" class="btn btn-primary whitespace-nowrap flex items-center gap-2">
                            <i data-lucide="plus" class="w-5 h-5"></i>
                            <span class="hidden sm:inline">Добавить пользователя</span>
                            <span class="sm:hidden">Добавить</span>
                        </button>
                    </div>

                    <!-- Users Table -->
                    <div class="card overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead class="border-b border-slate-200 dark:border-slate-700">
                                <tr>
                                    <th class="text-left py-3 px-4 font-semibold text-slate-600 dark:text-slate-300">Имя</th>
                                    <th class="text-left py-3 px-4 font-semibold text-slate-600 dark:text-slate-300 hidden sm:table-cell">Email</th>
                                    <th class="text-left py-3 px-4 font-semibold text-slate-600 dark:text-slate-300">Роль</th>
                                    <th class="text-left py-3 px-4 font-semibold text-slate-600 dark:text-slate-300">Статус</th>
                                    <th class="text-right py-3 px-4 font-semibold text-slate-600 dark:text-slate-300">Действия</th>
                                </tr>
                            </thead>
                            <tbody id="usersList" class="divide-y divide-slate-200 dark:divide-slate-700">
                                <tr>
                                    <td colspan="5" class="py-8 px-4 text-center text-slate-500 dark:text-slate-400">
                                        Загрузка пользователей...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </section>

                <!-- Add/Edit User Modal -->
                <div id="userModal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
                    <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
                        <div class="sticky top-0 bg-white dark:bg-slate-900 p-6 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between">
                            <h3 class="text-xl font-bold text-slate-900 dark:text-white" id="userModalTitle">Добавить пользователя</h3>
                            <button id="closeUserModal" class="p-1 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg">
                                <i data-lucide="x" class="w-6 h-6"></i>
                            </button>
                        </div>

                        <form id="userForm" class="p-6 space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Полное имя</label>
                                <input type="text" id="userNameInput" class="input-field" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Email</label>
                                <input type="email" id="userEmailInput" class="input-field" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Роль</label>
                                <select id="userRoleSelect" class="input-field">
                                    <option value="superadmin">Суперадминистратор</option>
                                    <option value="admin">Администратор</option>
                                    <option value="moderator">Модератор</option>
                                    <option value="viewer">Только просмотр</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Пароль</label>
                                <input type="password" id="userPasswordInput" class="input-field" placeholder="Оставить пусто, чтобы оставить без изменений">
                            </div>
                            <div class="flex gap-3 pt-4">
                                <button type="submit" class="flex-1 btn btn-primary">Сохранить</button>
                                <button type="button" id="cancelUserEdit" class="flex-1 btn btn-secondary">Отмена</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>