Создай тикет-систему с акцентом на максимальную компактность и информативность.
🎨 Визуальные требования:
- Минимальные отступы (4px), шрифт 12px для таблиц, 13px для основного контента
- Максимально узкие строки таблиц (высота 24px), минимум отступов между строками
- При открытии страницы занимать 100% пространства браузера
- Боковое меню с ВСЕГДА видимым текстом + кнопка скрытия/разворачивания (сохранение состояния в localStorage)
- Тонкие тени при наведении, плавные анимации, современные скролл-бары
⚙️ Технологический стек (разрешено использовать любые технологии, НЕ ТРЕБУЮЩИЕ командной строки для установки):
- PHP 7.4+ для бэкенд-логики (без Composer, только нативные функции)
- HTML5, CSS3, JavaScript (ES6) для фронтенда
- MySql в качестве БД
- Локальные копии библиотек (GSAP, Lottie, TanStack Table и другие) без CDN
- Легковесные фреймворки (Alpine.js вместо React/Vue)
- Локальные шрифты в формате WOFF2
- CSS-анимации вместо тяжелых библиотек где возможно
- JSON-файлы для хранения конфигурации и демо-данных
🚫 Запрещено использовать:
- Технологии, требующие командной строки для установки
- Node.js, npm, yarn
- Системы сборки (Webpack, Vite, Rollup)
- Composer и другие менеджеры пакетов
- Любой код, требующий компиляции или сборки на сервере
🔧 Система установки:
- При загрузке проекта на хостинг проверяйте наличие файла install.lock
- Если install.lock отсутствует:
• Показывайте установочный процесс через PHP
• Шаг 1: Проверка подключения к БД через PHP
• Шаг 2: Создание таблиц из schema.json через PHP
• Шаг 3: Создание учетной записи администратора
• Шаг 4: Тестирование функционала
- После успешной установки:
• Создавать файл install.lock
• Показывать сообщение: "Установка завершена! Для безопасности удалите папку install"
• Перенаправлять на главную страницу
🔧 Управление базой данных
- В разделе "Система" → "Управление БД" добавить функционал:
• [Проверить подключение к БД] → статус (✅/❌) через PHP
• [Проверить структуру БД] → сравнение с schema.json через PHP
• [Создать недостающие элементы] → автоматическая синхронизация через PHP
- Отображение результатов:
• Список отсутствующих таблиц и столбцов
• Лог операций с возможностью раскрытия
- Доступ только для администраторов
🔧 Настройка дополнительных полей
- В разделе "Система" → "Дополнительные поля" добавить функционал:
• Создание пользовательских полей для клиентов, сотрудников и департаментов
• Выбор типа поля: текст, число, дата, выпадающий список, чекбокс, радио-кнопки
• Настройка размера поля (ширина в процентах или пикселях)
• Настройка обязательности поля
• Группировка полей в секции
• Установка порядка отображения полей
• Настройка видимости поля для определенных ролей
• Возможность добавления подсказок и плейсхолдеров
• Импорт/экспорт структуры полей в JSON
- Интерфейс:
• Таблица с существующими полями с возможностью сортировки
• Форма добавления/редактирования полей с выбором типа и параметров
• Предпросмотр формы с новыми полями
• Статус валидации для каждого поля
• Фильтрация по сущности (клиенты, сотрудники, департаменты)
🔧 Настройки почты
- Страница "/settings/email" для настройки почтовых уведомлений
- Форма настроек SMTP:
• Хост, Порт, Логин, Пароль
• Тип шифрования (SSL/TLS)
• Тестовая отправка
- Управление шаблонами писем:
• Создание/редактирование шаблонов
• Переменные для подстановки (имя клиента, номер тикета и т.д.)
• Предпросмотр шаблонов
- Настройка событий для уведомлений:
• Новые тикеты
• Изменение статуса
• Новые комментарии
• Назначение на сотрудника
🔧 Интеграции
- Страница "/integrations" с настройками интеграций
- Доступные интеграции:
• Telegram (боты для автоматических ответов)
• WhatsApp Business (официальная интеграция)
• WhatsApp (через QR-код)
• ВКонтакте (Callback API)
• WhatsApp (через API)
• WhatsApp (через WhatsApp green api)
- Для каждой интеграции:
• Кнопка подключения
• Настройка параметров
• Статус подключения
• Лог событий
• Статистика использования
🔧 Департаменты
- Страница "/departments" с таблицей департаментов
- Функционал:
• Создание/редактирование департаментов
• Назначение ответственных сотрудников
• Настройка прав доступа
• Установка времени ответа для тикетов
- Визуализация структуры департаментов
- Статистика по департаментам (количество тикетов, среднее время решения)
🔧 Права доступа
- Страница "/permissions" для управления правами
- Функционал:
• Создание новых ролей (Администратор, Менеджер, Оператор, Клиент и другие)
• Назначение прав для каждой роли:
- Просмотр раздела
- Редактирование в разделе
- Полный доступ к разделу
- Отсутствие доступа
• Детальная настройка прав по разделам:
- Тикеты (просмотр, создание, редактирование, удаление)
- Клиенты (просмотр, создание, редактирование, увольнение)
- Сотрудники (просмотр, создание, редактирование)
- Департаменты (просмотр, создание, редактирование)
- Настройки системы (полный доступ)
• Назначение ролей сотрудникам
• Просмотр текущих прав сотрудника
- Интерфейс:
• Таблица ролей с возможностью сортировки
• Детальный редактор прав для каждой роли
• Визуальное отображение прав (иконки: ✅ просмотр, ✏️ редактирование, ❌ нет доступа)
• Поиск и фильтрация ролей
• История изменений прав
🔧 Клиенты
- Страница "/clients" с максимально компактной таблицей клиентов:
• Столбцы: ID, Название, Контактное лицо, Email, Телефон, Тикетов, Последняя активность
• Крайне узкие строки (высота 24px), минимальный вертикальный паддинг
• Отсутствие границ между строками для экономии места
• Возможность сортировки по любому столбцу
• Изменение ширины столбцов
• Скрытие/показ столбцов через меню
• Поиск и фильтрация
- Профиль клиента:
• Основная информация (название, тип, статус)
• Контактные данные (адрес, email, телефон)
• Тикеты клиента (с фильтрацией)
• Документы и контракты
• История взаимодействия
- Форма создания/редактирования клиента:
• Основная информация
• Контактные данные
• Добавление кастомных полей
• Загрузка документов
🔧 Сотрудники
- Страница "/staff" с максимально компактной таблицей сотрудников:
• Столбцы: Имя, Роль, Департамент, Статус, Назначено тикетов, Решено тикетов
• Крайне узкие строки (высота 24px), минимальный вертикальный паддинг
• Отсутствие границ между строками для экономии места
• Возможность сортировки по любому столбцу
• Изменение ширины столбцов
• Скрытие/показ столбцов через меню
• Поиск и фильтрация по департаменту, роли, статусу
- Профиль сотрудника:
• Личная информация (имя, email, телефон)
• Рабочая информация (должность, департамент, ID сотрудника, дата найма)
• Настройки уведомлений
• Статистика (тикеты в работе, решено тикетов, среднее время решения)
- Форма создания/редактирования сотрудника:
• Основная информация
• Назначение прав доступа
• Настройка рабочего времени
• Интеграции
🔧 Тикеты
- Страница "/tickets" с максимально компактной таблицей:
• Столбцы: ID, Тема, Статус, Приоритет, Департамент, Дата создания, Назначено, кто дал последний ответ в тикете, сколько времени прошло с последнего ответа, текст последнего ответа.
• Крайне узкие строки (высота 24px), минимальный вертикальный паддинг
• Отсутствие границ между строками для экономии места
• Возможность сортировки по любому столбцу
• Изменение ширины столбцов (drag & resize)
• Скрытие/показ столбцов через меню
• Поиск по таблице (фильтрация в реальном времени)
• Пагинация или бесконечная прокрутка
- Форма создания тикета:
• Поля: Тема, Департамент, Приоритет, Категория, Описание
• Вложения (файлы, изображения)
• Предварительный просмотр форматированного текста
🔧 Дополнительные функции
- **Система уведомлений**:
• Центр уведомлений в правом верхнем углу
• Настройка типа уведомлений (звук, всплывающие окна)
• Фильтрация уведомлений по типу
• Массовое удаление уведомлений
• Настройка автоматического закрытия через 5 секунд
- **Календарь событий**:
• Просмотр назначенных тикетов на календаре
• Назначение дедлайнов для тикетов
• Интеграция с Google Calendar
• Уведомления о предстоящих дедлайнах
• Возможность переноса дедлайнов перетаскиванием
- **Система отчетов и аналитики**:
• Графики по тикетам (статусы, приоритеты, департаменты)
• Отчеты по эффективности сотрудников
• Анализ времени решения тикетов
• Экспорт отчетов в Excel/PDF
• Настройка периодичности отчетов
- **Массовые действия с тикетами**:
• Массовое изменение статуса
• Массовое назначение на сотрудника
• Массовое изменение приоритета
• Массовое добавление тегов
• Массовое закрытие тикетов
- **Рабочее время**:
• Настройка рабочих часов для сотрудников
• Учет рабочего времени при расчете SLA
• Настройка праздничных дней
• Отображение текущего статуса (в работе/на перерыве)
• Автоматическое обновление статуса по расписанию
- **Шаблоны ответов**:
• Быстрая вставка шаблонных ответов
• Категоризация шаблонов
• Поиск по шаблонам
• Переменные в шаблонах (имя клиента, номер тикета)
• Настройка прав доступа к шаблонам
- **Система автоматизации**:
• Создание правил автоматизации
• Условия (приоритет, статус, департамент)
• Действия (назначение на сотрудника, изменение статуса)
• Триггеры (создание тикета, изменение статуса)
• Лог выполнения правил
- **Группы тикетов**:
• Создание групп связанных тикетов
• Общая информация для группы
• Статус группы (открыт, в работе, закрыт)
• Объединение тикетов в группу
• Разделение групп на подгруппы
- **Оценка удовлетворенности**:
• Отправка опросов после закрытия тикета
• Настройка шкалы оценки (1-5, 1-10)
• Анализ результатов опросов
• Интеграция оценок в профиль клиента
• Уведомления о низких оценках
- **Темная/светлая тема**:
• Автоматическое определение системной темы
• Ручное переключение темы
• Сохранение выбора в localStorage
• Компактный переключатель в шапке
🔧 Чек-лист и демо-данные.
- Создать максимально детализированный CHECKLIST.md, где каждый раздел разбит на мелкие задачи. Для каждого раздела (Тикеты, Клиенты, Сотрудники и т.д.) должна быть полная детализация всех функций, интерфейсов и API-методов. Чек-лист должен включать в себя не только фронтенд-часть, но и бэкенд-реализацию, базу данных и интеграции. Добавить раздел "Зависимости" с описанием взаимосвязей между задачами.
[ ] - не реализованная функция.
[X] - Реализованная функция.
Пример чек лист:
Этап 2: Реализация тикетов (ожидаемое время: 5 дней)
[X] 2.1 Таблица тикетов
2.1.1 Реализация компактной таблицы с высотой строк 24px (3 часа, высокий приоритет, зависит от 1.2)
2.1.2 Настройка минимальных отступов (4px между элементами, 2px внутри) (2 часа, высокий приоритет, зависит от 2.1.1)
2.1.3 Реализация отсутствия границ между строками (1 час, высокий приоритет, зависит от 2.1.1)
2.1.4 Добавление возможности сортировки по любому столбцу (3 часа, высокий приоритет, зависит от 2.1.1)
2.1.5 Реализация изменения ширины столбцов (drag & resize) (4 часа, высокий приоритет, зависит от 2.1.1)
2.1.6 Добавление функционала скрытия/показа столбцов через меню (3 часа, средний приоритет, зависит от 2.1.1)
2.1.7 Реализация поиска по таблице (фильтрация в реальном времени) (3 часа, высокий приоритет, зависит от 2.1.1)
2.1.8 Добавление пагинации или бесконечной прокрутки (4 часа, средний приоритет, зависит от 2.1.1)
[ ] 2.2 Форма создания тикета
2.2.1 Создание полей: Тема, Департамент, Приоритет, Категория, Описание (3 часа, высокий приоритет, зависит от 1.2.3, 1.2.4)
2.2.2 Реализация вложений (файлы, изображения) (4 часа, средний приоритет, зависит от 2.2.1)
2.2.3 Добавление предварительного просмотра форматированного текста (3 часа, средний приоритет, зависит от 2.2.1)
2.2.4 Интеграция с системой прав доступа (2 часа, высокий приоритет, зависит от 3.2)
2.2.5 Добавление автоматических уведомлений при создании тикета (3 часа, средний приоритет, зависит от 4.1)
- Включить демо-данные для быстрого старта:
• 5 демо-тикетов с разными статусами и приоритетами
• 3 демо-клиента с контактной информацией
• 4 демо-сотрудника с разными ролями
• 2 демо-департамента
• Настроенные демо-интеграции (Telegram, WhatsApp)
- После установки системы, демо-данные можно легко удалить через админ-панель
📁 Структура проекта:
project-root/
├── index.php
├── config.php
├── install/
│ ├── setup.php
│ ├── schema.json
│ └── install.php
├── css/
│ ├── main.css
│ └── animations.css
├── js/
│ ├── libs/
│ │ ├── gsap.min.js
│ │ ├── lottie.min.js
│ │ └── table.min.js
│ └── main.js
├── api/
│ ├── db_status.php
│ ├── db_compare.php
│ └── db_migrate.php
│ ├── email_test.php
│ ├── integration_telegram.php
│ ├── integration_whatsapp.php
│ ├── permissions.php
│ ├── departments.php
│ ├── clients.php
│ ├── staff.php
│ ├── tickets.php
│ └── custom_fields.php
├── data/
│ ├── tickets.json
│ ├── staff.json
│ ├── clients.json
│ ├── departments.json
│ ├── permissions.json
│ └── custom_fields.json
├── images/
│ ├── logo.svg
│ └── icons/
└── fonts/
├── inter.woff2
└── roboto.woff2
📝 Требования к установке:
- Проверка наличия файла install.lock при загрузке сайта
- Если install.lock отсутствует - показывать установочный процесс через PHP
- После успешной установки создавать install.lock и удалять папку install
- Сохранять настройки БД в config.php
📝 Требования к интерфейсу:
- Крайне плотные таблицы с высотой строк 24px и минимальными отступами
- Боковое меню с ВСЕГДА видимым текстом + кнопка скрытия/разворачивания
- Темная тема по умолчанию с синими акцентами
- Компактные карточки с тонкими границами
- Тонкие тени при наведении, плавные анимации
- Современные скролл-бары (8px ширины)
📦 Выходные файлы:
- Полный проект с PHP-бэкендом и статическим фронтендом
- Инструкция в README.md для установки на хостинг без командной строки
- Готовый к работе после первичной настройки
- schema.json с эталонной схемой БД
- Демо-данные для быстрого старта
- CHECKLIST.md с пошаговым чек-листом разработки
- README.md с инструкцией по постепенной реализации функционала и постепенного замены демо-данных на реальные функции и реальные данные.
📊 Расширяемые таблицы
- Реализовать таблицы таким образом, чтобы добавление новых столбцов требовало минимальных изменений:
- Хранить конфигурацию столбцов в отдельном объекте/массив
- Использовать функции для рендеринга ячеек, чтобы можно было легко менять логику отображения
- Реализовать систему хуков для модификации столбцов перед рендерингом:
- Хранить ширину столбцов в localStorage для сохранения пользовательских настроек
- Реализовать механизм динамического добавления столбцов через API для дополнительных полей
- Все таблицы должны использовать один и тот же базовый компонент с возможностью расширения
🧩 Расширяемый код для новых функций
- Писать код так, чтобы добавление новой функциональности требовало минимальных изменений в существующем коде
- Реализовать систему хуков и событий для расширения функционала
- Использовать паттерн "Стратегия" для замены алгоритмов без изменения основного кода
- Создавать модульные компоненты с четкими интерфейсами и минимальными зависимостями
- Для каждой новой функции определить точки интеграции с существующим кодом
- Все новые функции должны добавляться через систему плагинов или расширений
📄 Динамическое поддержание README.md
- Реализовать процесс, гарантирующий, что README.md всегда содержит актуальную информацию
- Добавить в процесс разработки обязательный шаг: "Обновление документации" перед коммитом
- Реализовать шаблон для новых разделов в README
- При удалении функционала обязательно удалить соответствующий раздел из README
- В README.md добавить раздел "Как обновлять этот документ", объясняющий правила поддержания документации
- Включить в README.md информацию о том, как добавлять новые функции в документацию