428 lines
21 KiB
Markdown
428 lines
21 KiB
Markdown
# Система управления складом "Склад-Менеджер"
|
||
|
||
Современная веб-система для управления складом деталей и операциями с разными уровнями доступа.
|
||
|
||
## 🚀 Возможности системы
|
||
|
||
### Основной функционал
|
||
- **Управление позициями**: добавление, редактирование, удаление позиций
|
||
- **Операции склада**: приход и расход позиций
|
||
- **Каталог позиций**: удобный просмотр с фильтрами и поиском
|
||
- **История операций**: полный учет всех операций со складом
|
||
- **Поиск**: быстрый поиск позиций и операций
|
||
- **Отчеты**: генерация различных отчетов
|
||
- **Экспорт данных**: выгрузка в CSV и JSON форматах
|
||
- **Настраиваемые категории**: полный CRUD для категорий позиций
|
||
- **Hover-навигация**: выпадающее меню категорий при наведении
|
||
|
||
### Система безопасности
|
||
- **Многоуровневая авторизация** с разными ролями
|
||
- **Контроль доступа** к функциям системы
|
||
- **Безопасные сессии** пользователей
|
||
- **Валидация данных** на всех уровнях
|
||
- **Проверка прав доступа** для каждой операции
|
||
- **Безопасная обработка ошибок** с информативными уведомлениями
|
||
- **URL валидация** параметров и фильтров
|
||
- **Автоматическое скрытие элементов** в зависимости от ролей
|
||
|
||
### Уровни доступа
|
||
|
||
#### 🔧 Администратор (admin/admin123)
|
||
- Полный доступ ко всем функциям
|
||
- Управление пользователями
|
||
- Настройка системы
|
||
- Просмотр всех отчетов
|
||
- Удаление позиций и категорий
|
||
|
||
#### 👔 Менеджер (manager/manager123)
|
||
- Чтение и запись данных
|
||
- Управление товарами
|
||
- Оформление операций
|
||
- Просмотр отчетов
|
||
- Создание и редактирование категорий
|
||
|
||
#### 👷 Оператор (operator/operator123)
|
||
- Только чтение данных
|
||
- Просмотр каталога и истории
|
||
- Экспорт данных
|
||
- Ограниченный доступ к функциям
|
||
|
||
#### 👁️ Наблюдатель (viewer/viewer123)
|
||
- Ограниченный просмотр
|
||
- Только чтение данных
|
||
- Экспорт данных
|
||
- Минимальный доступ
|
||
|
||
## 📁 Структура проекта
|
||
|
||
```
|
||
warehouse-system/
|
||
├── index.html # Главная страница
|
||
├── login.html # Страница авторизации
|
||
├── catalog.html # Каталог товаров
|
||
├── history.html # История операций
|
||
├── search.html # Поиск
|
||
├── profile.html # Профиль пользователя
|
||
├── admin/
|
||
│ ├── categories.html # Управление категориями
|
||
│ └── users.html # Управление пользователями
|
||
├── css/
|
||
│ └── style.css # Основные стили
|
||
├── js/
|
||
│ ├── auth.js # Система авторизации и прав доступа
|
||
│ ├── main.js # Основная логика
|
||
│ ├── warehouse.js # Управление складом
|
||
│ ├── catalog.js # Каталог товаров
|
||
│ ├── history.js # История операций
|
||
│ ├── search.js # Поиск
|
||
│ ├── profile.js # Профиль пользователя
|
||
│ ├── categories.js # Управление категориями
|
||
│ └── users.js # Управление пользователями
|
||
└── README.md # Документация
|
||
```
|
||
|
||
## 🚀 Старт
|
||
|
||
### Для разработки/демо
|
||
1. Откройте `login.html`
|
||
2. Используйте тестовые учетные записи:
|
||
- **Администратор**: `admin` / `admin123`
|
||
- **Менеджер**: `manager` / `manager123`
|
||
- **Оператор**: `operator` / `operator123`
|
||
- **Наблюдатель**: `viewer` / `viewer123`
|
||
|
||
### Настройка Email-уведомлений
|
||
1. Скопируйте `server/env.email.example` в `server/.env`
|
||
2. Настройте параметры SMTP-сервера:
|
||
- Для Gmail: используйте App Password
|
||
- Для Yandex/Mail.ru: используйте обычный пароль
|
||
3. Перезапустите сервер
|
||
4. Протестируйте отправку в разделе "Тест Email" (только для администраторов)
|
||
|
||
### Для продакшна
|
||
Система полностью готова к развертыванию в продакшн! См. подробные инструкции:
|
||
- 📋 **[DEPLOYMENT.md](DEPLOYMENT.md)** - пошаговое руководство по развертыванию
|
||
|
||
### 2. Начальная настройка
|
||
1. Войдите как администратор
|
||
2. Создайте категории позиций через "Администрирование" → "Категории позиций"
|
||
3. Добавьте первые позиции через "Каталог" → "Добавить позицию"
|
||
4. Настройте права доступа для пользователей
|
||
|
||
## 📖 Руководство пользователя
|
||
|
||
### Главная страница
|
||
- **Быстрые действия**: добавление товаров, приход/расход (согласно правам доступа)
|
||
- **Статистика**: общая информация о складе
|
||
- **Последние операции**: мониторинг активности
|
||
- **Быстрая навигация**: выпадающее меню категорий при наведении
|
||
|
||
### Hover-навигация по категориям
|
||
- **Выпадающее меню**: появляется при наведении на "Каталог"
|
||
- **Плавная анимация**: плавное появление и исчезновение
|
||
- **Быстрый переход**: клик по категории открывает отфильтрованный каталог
|
||
- **URL фильтрация**: прямые ссылки вида `catalog.html?category=electronics`
|
||
- **Визуальная обратная связь**: иконки, цвета и количество позиций в категориях
|
||
- **Единообразие**: одинаковое меню на всех страницах
|
||
- **Умное поведение**: меню не закрывается при наведении на само меню
|
||
|
||
### Каталог позиций
|
||
- **Просмотр**: все позиции с фильтрами и статистикой
|
||
- **Поиск**: по названию, описанию, штрих-коду
|
||
- **Фильтры**: по категории, цене, наличию, статусу запасов
|
||
- **Редактирование**: изменение информации о позициях (только для админов и менеджеров)
|
||
- **Удаление**: удаление позиций (только для администраторов)
|
||
- **Экспорт**: выгрузка каталога в CSV формате
|
||
- **Безопасность**: проверка прав доступа для всех операций
|
||
- **Hover-навигация**: выпадающее меню категорий при наведении
|
||
- **URL фильтрация**: прямая ссылка на отфильтрованный каталог
|
||
|
||
### История операций
|
||
- **Просмотр**: все операции с детализацией
|
||
- **Фильтры**: по типу, дате, товару, сотруднику
|
||
- **Отчеты**: генерация различных отчетов
|
||
- **Экспорт**: выгрузка данных
|
||
|
||
### Поиск
|
||
- **Универсальный поиск**: позиции и операции
|
||
- **Расширенные фильтры**: точная настройка
|
||
- **Результаты**: с подсветкой найденного
|
||
- **Экспорт результатов**: сохранение найденного
|
||
- **Hover-навигация**: переход к категориям из результатов поиска
|
||
|
||
### Профиль пользователя
|
||
- **Информация**: личные данные и права
|
||
- **Статистика**: активность пользователя
|
||
- **Настройки**: персонализация интерфейса
|
||
- **Безопасность**: смена пароля
|
||
|
||
### Администрирование
|
||
- **Управление категориями**: создание, редактирование, удаление категорий
|
||
- **Настройка иконок**: выбор иконок Font Awesome для категорий
|
||
- **Цветовая схема**: настройка цветов категорий
|
||
- **Активность категорий**: включение/отключение категорий
|
||
- **Управление пользователями**: полный CRUD для пользователей системы
|
||
- **Назначение ролей**: гибкая система ролей и разрешений
|
||
- **Статус пользователей**: активация/деактивация учетных записей
|
||
- **Отчеты**: фильтры по периоду, категории, сотруднику; экспорт CSV/JSON
|
||
|
||
## 📊 Отчеты
|
||
|
||
### Доступ
|
||
Откройте "Администрирование" → "Отчеты" (`admin/reports.html`). Доступен пользователям с правами `admin` или `manager` (чтение).
|
||
|
||
### Фильтры
|
||
- Период: дата от/до
|
||
- Тип операции: приход/расход/все
|
||
- Категория: выбор категории
|
||
- Товар: название/штрихкод
|
||
- Сотрудник: логин или ФИО
|
||
|
||
### Разделы
|
||
- Сводка: суммарный приход, расход, количество операций, уникальные товары
|
||
- Операции: таблица операций с деталями
|
||
- Остатки по категориям: количество позиций и суммарный остаток
|
||
- ТОП товаров по движению: лидеры по приходу/расходу
|
||
|
||
### Экспорт
|
||
- CSV: экспорт таблицы операций
|
||
- JSON: экспорт всей структуры отчета (сводка, таблицы)
|
||
|
||
## 📊 Структура данных
|
||
|
||
### Позиция
|
||
```javascript
|
||
{
|
||
id: 1,
|
||
name: "Название товара",
|
||
category: "electronics",
|
||
price: 1000,
|
||
quantity: 50,
|
||
description: "Описание товара",
|
||
barcode: "1234567890123",
|
||
minQuantity: 10,
|
||
location: "Стеллаж A-1",
|
||
supplier: "Поставщик",
|
||
createdAt: "2025-08-15T10:00:00Z",
|
||
updatedAt: "2025-08-15T10:00:00Z"
|
||
}
|
||
```
|
||
|
||
### Операция
|
||
```javascript
|
||
{
|
||
id: 1,
|
||
type: "incoming", // или "outgoing"
|
||
itemId: 1,
|
||
itemName: "Название товара",
|
||
quantity: 10,
|
||
employeeId: 1,
|
||
employeeName: "Имя сотрудника",
|
||
date: "2025-08-15T10:00:00Z",
|
||
status: "completed",
|
||
supplier: "Поставщик",
|
||
recipient: "Получатель",
|
||
notes: "Примечания"
|
||
}
|
||
```
|
||
|
||
### Пользователь
|
||
```javascript
|
||
{
|
||
id: 1,
|
||
username: "admin",
|
||
name: "Администратор",
|
||
email: "admin@company.com",
|
||
roles: ["admin"],
|
||
permissions: ["read", "write", "delete", "admin"],
|
||
department: "IT",
|
||
position: "Системный администратор"
|
||
}
|
||
```
|
||
|
||
### Категория
|
||
```javascript
|
||
{
|
||
id: "electronics",
|
||
name: "Электроника",
|
||
description: "Электронные компоненты и устройства",
|
||
icon: "fas fa-microchip",
|
||
color: "#2c5aa0",
|
||
active: true,
|
||
itemCount: 25,
|
||
totalQuantity: 150,
|
||
createdAt: "2025-08-15T10:00:00Z",
|
||
updatedAt: "2025-08-15T10:00:00Z"
|
||
}
|
||
```
|
||
|
||
## 🎨 Кастомизация
|
||
|
||
### Изменение цветовой схемы
|
||
Отредактируйте CSS переменные в `css/style.css`:
|
||
```css
|
||
:root {
|
||
--primary-color: #0d6efd;
|
||
--secondary-color: #6c757d;
|
||
--success-color: #198754;
|
||
--warning-color: #ffc107;
|
||
--danger-color: #dc3545;
|
||
--info-color: #0dcaf0;
|
||
}
|
||
```
|
||
|
||
### Настройка hover-меню категорий
|
||
Для настройки стилей hover-меню отредактируйте CSS в `css/style.css`:
|
||
```css
|
||
#catalogCategoriesDropdown {
|
||
min-width: 280px;
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
border: none;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
border-radius: 12px;
|
||
padding: 0.5rem 0;
|
||
}
|
||
|
||
/* Hover dropdown functionality */
|
||
.nav-item.dropdown:hover .dropdown-menu {
|
||
display: block !important;
|
||
}
|
||
|
||
.nav-item.dropdown:hover .dropdown-toggle::after {
|
||
transform: rotate(180deg);
|
||
}
|
||
```
|
||
|
||
### Настройка прав доступа
|
||
В файле `js/auth.js` измените массив пользователей или добавьте новые роли и разрешения. Система автоматически скрывает элементы в зависимости от ролей пользователя.
|
||
|
||
### Добавление новых категорий
|
||
Через интерфейс системы:
|
||
1. Войдите как администратор или менеджер
|
||
2. Перейдите в "Администрирование" → "Категории позиций"
|
||
3. Нажмите "Добавить категорию"
|
||
4. Заполните форму с иконкой, цветом и описанием
|
||
|
||
## 🔒 Безопасность
|
||
|
||
### Система управления правами доступа
|
||
- **Автоматическое скрытие элементов**: кнопки и функции скрываются согласно ролям
|
||
- **Проверка прав на сервере**: все операции проверяют права доступа
|
||
- **Безопасные сессии**: данные пользователя хранятся в LocalStorage
|
||
- **Валидация данных**: проверка всех входных данных
|
||
- **Информативные подсказки**: кнопки показывают требуемые права
|
||
|
||
### Production-готовность
|
||
- ✅ **Удалены отладочные логи** из фронтенда
|
||
- ✅ **Созданы production конфигурации** (.env файлы)
|
||
- ✅ **Настроена безопасность** (JWT, CORS, rate limiting)
|
||
- ✅ **Готовы инструкции** по развертыванию
|
||
|
||
### Рекомендации по безопасности
|
||
1. **Измените пароли по умолчанию** при первом входе
|
||
2. **Настройте JWT_SECRET** в production окружении
|
||
3. **Включите HTTPS** с SSL сертификатом
|
||
4. **Настройте файрвол** и rate limiting
|
||
5. **Регулярно обновляйте** права доступа
|
||
6. **Ведите логи** всех операций
|
||
7. **Делайте резервные копии** данных
|
||
|
||
## 📈 Производительность
|
||
|
||
### Оптимизация
|
||
- Используйте современный браузер
|
||
- Включите кэширование
|
||
- Минимизируйте количество одновременных операций
|
||
- Регулярно очищайте старые данные
|
||
|
||
### Production-оптимизация
|
||
- ✅ **Удалены отладочные логи** - улучшена производительность
|
||
- ✅ **Оптимизирован код** - убраны лишние console.log
|
||
- ✅ **Готовы production скрипты** - npm run start:prod
|
||
- ✅ **Настроено кэширование** - статические файлы
|
||
- ✅ **Оптимизированы запросы** - эффективная фильтрация
|
||
|
||
### Технические улучшения
|
||
- **Безопасная обработка данных**: проверка на null/undefined
|
||
- **Валидация форм**: клиентская проверка ввода
|
||
- **Обработка ошибок**: информативные уведомления
|
||
- **Права доступа**: детальная проверка ролей
|
||
- **Оптимизация производительности**: эффективная фильтрация
|
||
- **URL маршрутизация**: обработка параметров и фильтров
|
||
- **Асинхронная загрузка**: динамическое обновление меню
|
||
- **Кэширование данных**: оптимизация производительности
|
||
- **Hover-функциональность**: плавные анимации и переходы
|
||
|
||
## 🐛 Устранение неполадок
|
||
|
||
### Частые проблемы
|
||
|
||
#### Не работает авторизация
|
||
- Проверьте правильность логина/пароля
|
||
- Очистите кэш браузера
|
||
- Проверьте консоль на ошибки JavaScript
|
||
- Убедитесь, что JavaScript включен в браузере
|
||
|
||
#### Не сохраняются данные
|
||
- Проверьте доступ к LocalStorage
|
||
- Убедитесь, что JavaScript включен
|
||
- Проверьте права доступа пользователя
|
||
|
||
#### Медленная работа
|
||
- Закройте лишние вкладки
|
||
- Очистите кэш браузера
|
||
- Проверьте количество товаров/операций
|
||
|
||
#### Проблемы с каталогом
|
||
- Проверьте права доступа пользователя
|
||
- Убедитесь, что категории загружены корректно
|
||
- Проверьте консоль на ошибки загрузки данных
|
||
- Очистите фильтры, если каталог пустой
|
||
- Проверьте URL параметры для фильтрации по категориям
|
||
- Убедитесь, что hover-меню категорий загружается
|
||
|
||
#### Не работает hover-меню
|
||
- Проверьте, что JavaScript загружен корректно
|
||
- Убедитесь, что jQuery подключен
|
||
- Проверьте консоль на ошибки
|
||
- Очистите кэш браузера
|
||
|
||
#### Элементы интерфейса скрыты
|
||
- Проверьте роль пользователя
|
||
- Убедитесь, что пользователь авторизован
|
||
- Проверьте права доступа в auth.js
|
||
- Очистите LocalStorage и войдите заново
|
||
|
||
### Логи и отладка
|
||
Откройте консоль разработчика (F12) для просмотра ошибок и логов.
|
||
|
||
## 🤝 Поддержка
|
||
|
||
### Документация
|
||
- 📋 **[DEPLOYMENT.md](DEPLOYMENT.md)** - подробные инструкции по развертыванию
|
||
|
||
### Сообщение об ошибках
|
||
При обнаружении ошибок:
|
||
1. Опишите проблему подробно
|
||
2. Укажите версию браузера
|
||
3. Приложите скриншот ошибки
|
||
4. Опишите шаги для воспроизведения
|
||
|
||
### Запросы функций
|
||
Для добавления новых функций:
|
||
1. Опишите требуемую функциональность
|
||
2. Укажите приоритет
|
||
3. Приведите примеры использования
|
||
|
||
## 👥 Авторы
|
||
|
||
- **Разработка**: Roman Pylaev
|
||
- **Дизайн**: Roman Pylaev
|
||
- **Тестирование**: Roman Pylaev
|
||
- **Production-готовность**: Roman Pylaev
|
||
|
||
## 📞 Контакты
|
||
|
||
- **Telegram/Discord**: @dark7es
|