# Система управления складом "Склад-Менеджер" Современная веб-система для управления складом деталей и операциями с разными уровнями доступа. ## 🚀 Возможности системы ### Основной функционал - **Управление позициями**: добавление, редактирование, удаление позиций - **Операции склада**: приход и расход позиций - **Каталог позиций**: удобный просмотр с фильтрами и поиском - **История операций**: полный учет всех операций со складом - **Поиск**: быстрый поиск позиций и операций - **Отчеты**: генерация различных отчетов - **Экспорт данных**: выгрузка в 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 # Управление категориями ├── css/ │ └── style.css # Основные стили ├── js/ │ ├── auth.js # Система авторизации и прав доступа │ ├── main.js # Основная логика │ ├── warehouse.js # Управление складом │ ├── catalog.js # Каталог товаров │ ├── history.js # История операций │ ├── search.js # Поиск │ ├── profile.js # Профиль пользователя │ └── categories.js # Управление категориями └── README.md # Документация ``` ## 🛠️ Технологии - **HTML5** - семантическая разметка - **CSS3** - современные стили с CSS переменными - **Bootstrap 5** - адаптивный дизайн - **JavaScript (ES6+)** - интерактивность - **jQuery** - упрощение работы с DOM - **Font Awesome** - иконки - **LocalStorage** - локальное хранение данных ## 🚀 Быстрый старт ### 1. Установка 1. Скачайте или клонируйте проект 2. Откройте `index.html` в браузере 3. Или запустите локальный сервер: ```bash # Python 3 python -m http.server 8000 # Node.js npx http-server # PHP php -S localhost:8000 ``` ### 2. Первый вход 1. Откройте `login.html` 2. Используйте тестовые учетные записи: - **Администратор**: `admin` / `admin123` - **Менеджер**: `manager` / `manager123` - **Оператор**: `operator` / `operator123` - **Наблюдатель**: `viewer` / `viewer123` ### 3. Начальная настройка 1. Войдите как администратор 2. Создайте категории позиций через "Администрирование" → "Категории позиций" 3. Добавьте первые позиции через "Каталог" → "Добавить позицию" 4. Настройте права доступа для пользователей ## 📖 Руководство пользователя ### Главная страница - **Быстрые действия**: добавление товаров, приход/расход (согласно правам доступа) - **Статистика**: общая информация о складе - **Последние операции**: мониторинг активности - **Быстрая навигация**: выпадающее меню категорий при наведении ### Hover-навигация по категориям - **Выпадающее меню**: появляется при наведении на "Каталог" - **Плавная анимация**: плавное появление и исчезновение - **Быстрый переход**: клик по категории открывает отфильтрованный каталог - **URL фильтрация**: прямые ссылки вида `catalog.html?category=electronics` - **Визуальная обратная связь**: иконки, цвета и количество позиций в категориях - **Единообразие**: одинаковое меню на всех страницах - **Умное поведение**: меню не закрывается при наведении на само меню ### Каталог позиций - **Просмотр**: все позиции с фильтрами и статистикой - **Поиск**: по названию, описанию, штрих-коду - **Фильтры**: по категории, цене, наличию, статусу запасов - **Редактирование**: изменение информации о позициях (только для админов и менеджеров) - **Удаление**: удаление позиций (только для администраторов) - **Экспорт**: выгрузка каталога в CSV формате - **Безопасность**: проверка прав доступа для всех операций - **Hover-навигация**: выпадающее меню категорий при наведении - **URL фильтрация**: прямая ссылка на отфильтрованный каталог ### История операций - **Просмотр**: все операции с детализацией - **Фильтры**: по типу, дате, товару, сотруднику - **Отчеты**: генерация различных отчетов - **Экспорт**: выгрузка данных ### Поиск - **Универсальный поиск**: позиции и операции - **Расширенные фильтры**: точная настройка - **Результаты**: с подсветкой найденного - **Экспорт результатов**: сохранение найденного - **Hover-навигация**: переход к категориям из результатов поиска ### Профиль пользователя - **Информация**: личные данные и права - **Статистика**: активность пользователя - **Настройки**: персонализация интерфейса - **Безопасность**: смена пароля ### Администрирование - **Управление категориями**: создание, редактирование, удаление категорий - **Настройка иконок**: выбор иконок Font Awesome для категорий - **Цветовая схема**: настройка цветов категорий - **Активность категорий**: включение/отключение категорий ## 🔧 Администрирование ### Управление пользователями 1. Войдите как администратор 2. Перейдите в раздел "Администрирование" 3. Выберите "Управление пользователями" 4. Создавайте, редактируйте, удаляйте пользователей ### Настройка категорий 1. Откройте "Администрирование" → "Категории позиций" 2. Добавьте нужные категории с иконками и цветами 3. Настройте описания и активность 4. Категории автоматически появятся в hover-меню 5. Изменения применяются мгновенно на всех страницах ### Генерация отчетов 1. Выберите тип отчета 2. Укажите период 3. Настройте параметры 4. Экспортируйте в нужном формате ## 📊 Структура данных ### Позиция ```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 - **Валидация данных**: проверка всех входных данных - **Информативные подсказки**: кнопки показывают требуемые права ### Рекомендации по безопасности 1. **Измените пароли по умолчанию** при первом входе 2. **Используйте HTTPS** в продакшене 3. **Регулярно обновляйте** права доступа 4. **Ведите логи** всех операций 5. **Делайте резервные копии** данных ### Настройка HTTPS Для продакшена обязательно используйте SSL-сертификат: ```bash # Пример с Let's Encrypt sudo certbot --nginx -d your-domain.com ``` ## 📈 Производительность ### Оптимизация - Используйте современный браузер - Включите кэширование - Минимизируйте количество одновременных операций - Регулярно очищайте старые данные ### Масштабирование - Для больших объемов данных используйте базу данных - Добавьте серверную часть (PHP, Node.js, Python) - Используйте CDN для статических файлов - Настройте кэширование на сервере - Оптимизируйте загрузку категорий для больших каталогов ### Технические улучшения - **Безопасная обработка данных**: проверка на null/undefined - **Валидация форм**: клиентская проверка ввода - **Обработка ошибок**: информативные уведомления - **Права доступа**: детальная проверка ролей - **Оптимизация производительности**: эффективная фильтрация - **URL маршрутизация**: обработка параметров и фильтров - **Асинхронная загрузка**: динамическое обновление меню - **Кэширование данных**: оптимизация производительности - **Hover-функциональность**: плавные анимации и переходы ## 🔄 Последние обновления ### Версия 1.3.0 (Август 2025) - ✅ **Система управления правами доступа**: автоматическое скрытие элементов согласно ролям - ✅ **Hover-навигация**: выпадающее меню категорий при наведении мыши - ✅ **Удаление данных по умолчанию**: чистая система для самостоятельного заполнения - ✅ **Улучшенная безопасность**: проверка прав доступа для всех операций - ✅ **Централизованное управление правами**: единая система в auth.js - ✅ **Информативные подсказки**: кнопки показывают требуемые права - ✅ **Плавные анимации**: hover-эффекты и переходы - ✅ **Умное поведение меню**: предотвращение закрытия при наведении ### Версия 1.2.0 (Январь 2025) - ✅ **Добавлено выпадающее меню категорий**: быстрая навигация по категориям - ✅ **Реализована URL фильтрация**: прямые ссылки на отфильтрованный каталог - ✅ **Улучшена навигация**: единообразное меню на всех страницах - ✅ **Добавлены анимации**: плавные эффекты появления меню - ✅ **Улучшен UX**: hover эффекты и визуальная обратная связь - ✅ **Расширена функциональность**: переходы между категориями из любого места ### Версия 1.1.0 (Январь 2025) - ✅ **Улучшена безопасность каталога**: добавлена проверка прав доступа - ✅ **Исправлена навигация**: добавлена ссылка "Поиск" в главное меню - ✅ **Улучшена обработка ошибок**: безопасная работа с пустыми данными - ✅ **Добавлена валидация**: проверка на null/undefined значения - ✅ **Улучшена статистика**: безопасный подсчет с fallback значениями - ✅ **Исправлены отступы**: консистентная структура кода - ✅ **Добавлены уведомления**: информативные сообщения об ошибках ## 🐛 Устранение неполадок ### Частые проблемы #### Не работает авторизация - Проверьте правильность логина/пароля - Очистите кэш браузера - Проверьте консоль на ошибки JavaScript - Убедитесь, что JavaScript включен в браузере #### Не сохраняются данные - Проверьте доступ к LocalStorage - Убедитесь, что JavaScript включен - Проверьте права доступа пользователя #### Медленная работа - Закройте лишние вкладки - Очистите кэш браузера - Проверьте количество товаров/операций #### Проблемы с каталогом - Проверьте права доступа пользователя - Убедитесь, что категории загружены корректно - Проверьте консоль на ошибки загрузки данных - Очистите фильтры, если каталог пустой - Проверьте URL параметры для фильтрации по категориям - Убедитесь, что hover-меню категорий загружается #### Не работает hover-меню - Проверьте, что JavaScript загружен корректно - Убедитесь, что jQuery подключен - Проверьте консоль на ошибки - Очистите кэш браузера #### Элементы интерфейса скрыты - Проверьте роль пользователя - Убедитесь, что пользователь авторизован - Проверьте права доступа в auth.js - Очистите LocalStorage и войдите заново ### Логи и отладка Откройте консоль разработчика (F12) для просмотра ошибок и логов. ## 🤝 Поддержка ### Сообщение об ошибках При обнаружении ошибок: 1. Опишите проблему подробно 2. Укажите версию браузера 3. Приложите скриншот ошибки 4. Опишите шаги для воспроизведения ### Запросы функций Для добавления новых функций: 1. Опишите требуемую функциональность 2. Укажите приоритет 3. Приведите примеры использования ## 📄 Лицензия Этот проект распространяется под лицензией MIT. См. файл LICENSE для подробностей. ## 👥 Авторы - Разработка: [Ваше имя] - Дизайн: [Имя дизайнера] - Тестирование: [Имя тестировщика] ## 📞 Контакты - Email: support@warehouse-system.com - Телефон: +7 (XXX) XXX-XX-XX - Веб-сайт: https://warehouse-system.com --- **Версия**: 1.3.0 **Дата**: Август 2025 **Последнее обновление**: 15.08.2025