PostgreSQL Admin Panel (PG-Admin)

🎯 Описание

Современная, production-ready панель администратора для управления PostgreSQL базами данных с модульной архитектурой, поддержкой темной/светлой темы, адаптивным дизайном и полной функциональностью для администраторов.

✨ Особенности

🏗️ Архитектура

• Модульная структура - разделение на отдельные модули (auth, dashboard, admin)
• Frontend и Backend разделены - чистая архитектура
• SPA (Single Page Application) - быстрая навигация без перезагрузок
• RESTful API - стандартные API endpoints

🎨 Дизайн & UX

• Темная/Светлая тема - автоматическое определение системной темы
• Адаптивный дизайн - полная поддержка мобильных устройств
• Современный UI - использование Tailwind CSS и Lucide Icons
• Плавные анимации - интерактивные переходы и эффекты
• Доступность - поддержка клавиатурной навигации

👥 Управление пользователями

• Разные роли - superadmin, admin, moderator, viewer
• Управление правами доступа - контроль доступа к функциям
• Активация/Деактивация - управление состоянием пользователей
• Логирование - отслеживание всех действий в системе

💾 Работа с базой данных

• Просмотр таблиц - список всех таблиц в БД
• Просмотр данных - пагинация, поиск, фильтрация
• SQL запросы - выполнение произвольных SQL запросов
• Статистика - информация о размере и состоянии БД

🔒 Безопасность

• Хеширование паролей - bcryptjs для безопасного хранения
• Session-based auth - безопасное управление сеансами
• CSRF защита - встроенная в Express session
• SQL injection protection - параметризованные запросы

📱 Мобильная поддержка

• Responsive Layout - адаптащия для всех размеров экранов
• Touch-friendly - оптимизированные кнопки и элементы
• Боковое меню - сворачиваемое на мобильных устройствах
• Компактная навигация - эффективное использование пространства

🚀 Быстрый старт

Требования

• Node.js 14+
• PostgreSQL 12+
• Docker & Docker Compose (опционально)

Установка

1. Клонируйте репозиторий

git clone <repository-url>
cd pg-admin

2. Установите зависимости

npm install

3. Создайте файл .env

cp .env.example .env

4. Отредактируйте .env с вашими данными

NODE_ENV=development
PORT=3000
SESSION_SECRET=your-secret-key-change-this

DB_HOST=localhost
DB_PORT=5432
DB_NAME=postgres
DB_USER=postgres
DB_PASSWORD=postgres

5. Запустите приложение

npm start

или для разработки с автоперезагрузкой:

npm run dev

6. Откройте браузер

http://localhost:3000

🐳 Docker запуск

docker-compose up --build

Приложение станет доступно на http://localhost:3000

📁 Структура проекта

pg-admin/
├── public/                          # Frontend код
│   ├── index.html                  # Главная страница
│   ├── modules/                    # UI модули
│   │   ├── auth/                   # Аутентификация
│   │   ├── dashboard/              # Основная панель
│   │   └── admin/                  # Админ панель
│   ├── styles/                     # CSS файлы
│   │   ├── main.css               # Основные стили
│   │   ├── theme.css              # Темы (свет/темнота)
│   │   ├── responsive.css         # Адаптивность
│   │   └── animations.css         # Анимации
│   └── js/                         # JavaScript
│       ├── theme.js               # Управление темой
│       ├── api.js                 # API запросы
│       ├── auth.js                # Аутентификация
│       ├── router.js              # SPA роутер
│       └── app.js                 # Главное приложение
│
├── src/                            # Backend код
│   ├── routes/                     # API маршруты
│   │   ├── auth.js                # Аутентификация
│   │   ├── users.js               # Управление пользователями
│   │   ├── db-tables.js           # Работа с БД
│   │   └── admin.js               # Админ функции
│   ├── middleware/                 # Express middleware
│   ├── config/                     # Конфиг файлы
│   └── database/                   # Database helpers
│
├── server.js                       # Главный файл приложения
├── Dockerfile                      # Docker конфиг
├── docker-compose.yml              # Docker Compose конфиг
├── package.json                    # NPM зависимости
├── .env.example                    # Пример .env файла
└── README.md                       # Этот файл

🔐 Учетные данные по умолчанию

При первом запуске создается администратор:

• Email: admin@example.com
• Пароль: admin123

⚠️ Обязательно смените пароль после первого входа!

🛣️ API Endpoints

Аутентификация

• POST /api/auth/register - Регистрация
• POST /api/auth/login - Вход
• POST /api/auth/logout - Выход
• GET /api/auth/me - Текущий пользователь

Пользователи

• GET /api/users - Список пользователей (админ)
• POST /api/users - Создать пользователя (админ)
• PATCH /api/users/:userId - Обновить пользователя
• DELETE /api/users/:userId - Удалить пользователя (админ)

База данных

• GET /api/db/tables - Список таблиц
• GET /api/db/tables/:tableName/data - Данные таблицы
• POST /api/db/query - Выполнить SQL запрос
• GET /api/db/stats - Статистика БД

Администрирование

• GET /api/admin/stats - Системная статистика
• GET /api/admin/logs - Логи активности
• GET /api/admin/backups - Список резервных копий
• POST /api/admin/backups - Создать резервную копию

🎨 Настройки темы

Приложение автоматически определяет предпочтение темы системы:

• Темная тема - если система установила темный режим
• Светлая тема - если система установила светлый режим

Пользователь может переключать тему вручную с помощью кнопки (🌙/☀️) в заголовке.

Выбор сохраняется в localStorage.

📱 Адаптивность

Приложение полностью адаптивно:

• Mobile (< 640px) - оптимизированный интерфейс
• Tablet (640-1024px) - промежуточный размер
• Desktop (> 1024px) - полный функционал

🚦 Роли и права доступа

Superadmin

• Полный доступ ко всем функциям
• Управление пользователями
• Администрирование системы
• Просмотр логов

Admin

• Управление таблицами
• Просмотр и редактирование данных
• Управление пользователями
• Просмотр статистики

Moderator

• Просмотр и редактирование данных
• Ограниченный доступ к таблицам
• Без прав на удаление

Viewer

• Только просмотр данных
• Без прав на редактирование

🔧 Разработка

Горячая перезагрузка

npm run dev

Структура кода

Frontend:

• Modular: каждый компонент в своем модуле
• API layer: централизованные запросы в api.js
• Router: SPA маршрутизация в router.js
• Theme: система тем в theme.js

Backend:

• Express.js фреймворк
• PostgreSQL драйвер pg
• Bcryptjs для паролей
• Session-based аутентификация

Тестирование

# Регистрация нового пользователя
curl -X POST http://localhost:3000/api/auth/register \
  -H "Content-Type: application/json" \
  -d '{"name":"Test","email":"test@example.com","password":"test123"}'

# Вход
curl -X POST http://localhost:3000/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"test@example.com","password":"test123"}'

# Список таблиц
curl http://localhost:3000/api/db/tables

🐛 Известные проблемы

• Функция дублирования таблиц требует реализации
• Экспорт данных в CSV/JSON планируется
• Мониторинг запросов к БД в разработке

🗺️ Дорожная карта

• Резервное копирование БД
• Экспорт/импорт данных
• Мониторинг производительности
• Интеграция с аналитикой
• WebSocket поддержка
• Offline режим
• PWA преобразование

📝 Лицензия

MIT License - смотрите LICENSE файл для деталей

👥 Поддержка

Обнаружили баг? Откройте issue на GitHub.

Есть идеи для улучшения? Создайте pull request.

📚 Дополнительные ресурсы

• Express.js документация
• PostgreSQL документация
• Tailwind CSS
• Lucide Icons

---

Версия: 2.0.0
Поддержка: Node.js 14+
Лицензия: MIT