pg-adminus/public/modules/dashboard/dashboard.html

<!-- Dashboard Module -->
<div id="dashboardModule" class="dashboard-module hidden h-screen flex flex-col">
    <!-- Header -->
    <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-2 sm:gap-4">
            <button id="toggleSidebar" 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="database" class="w-6 h-6"></i>
                <span class="font-bold text-lg hidden sm:inline">SensoLab</span>
            </div>
        </div>
        
        <div class="flex items-center gap-3">
            <button id="toggleTheme" 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>
            <div class="flex items-center gap-2 text-sm">
                <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-semibold hidden sm:flex" id="avatarCircle">A</div>
                <div class="hidden sm:block">
                    <p class="font-semibold text-slate-900 dark:text-white text-sm" id="userName">Admin</p>
                    <p class="text-xs text-slate-500 dark:text-slate-400" id="userRole">Администратор</p>
                </div>
            </div>
            <button id="logoutBtn" 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">
        <!-- Sidebar -->
        <aside id="sidebar" 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="#dashboard" class="nav-item active flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                    <i data-lucide="home" class="w-5 h-5"></i>
                    <span>Панель управления</span>
                </a>
                
                <a href="#databases" 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="#tables" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                    <i data-lucide="table" class="w-5 h-5"></i>
                    <span>Таблицы</span>
                </a>

                <a href="#queries" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                    <i data-lucide="terminal" class="w-5 h-5"></i>
                    <span>SQL Запросы</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-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-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>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 overflow-auto">
            <div id="dashboardContent" class="p-4 sm:p-6 space-y-6">
                <!-- Stats Row -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="card">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-500 dark:text-slate-400">Таблиц</p>
                                <p class="text-2xl font-bold text-slate-900 dark:text-white" id="statsTableCount">0</p>
                            </div>
                            <div class="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
                                <i data-lucide="table" class="w-6 h-6 text-blue-600 dark:text-blue-400"></i>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-500 dark:text-slate-400">Записей</p>
                                <p class="text-2xl font-bold text-slate-900 dark:text-white" id="statsRecordCount">0</p>
                            </div>
                            <div class="p-3 bg-green-100 dark:bg-green-900/30 rounded-lg">
                                <i data-lucide="database" class="w-6 h-6 text-green-600 dark:text-green-400"></i>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-500 dark:text-slate-400">Пользователей</p>
                                <p class="text-2xl font-bold text-slate-900 dark:text-white" id="statsUserCount">0</p>
                            </div>
                            <div class="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
                                <i data-lucide="users" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-500 dark:text-slate-400">Размер БД</p>
                                <p class="text-2xl font-bold text-slate-900 dark:text-white" id="statsDbSize">-</p>
                            </div>
                            <div class="p-3 bg-orange-100 dark:bg-orange-900/30 rounded-lg">
                                <i data-lucide="hard-drive" class="w-6 h-6 text-orange-600 dark:text-orange-400"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tables Preview -->
                <div class="card">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-lg font-semibold text-slate-900 dark:text-white flex items-center gap-2">
                            <i data-lucide="table" class="w-5 h-5"></i>
                            Таблицы
                        </h2>
                        <a href="#tables" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Все таблицы</a>
                    </div>
                    <div id="tablesList" class="space-y-2">
                        <p class="text-slate-500 dark:text-slate-400 text-sm">Загрузка...</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>