5.0 KiB
Дашборд продаж по регионам
Тип решения
Статический сайт (index.html + style.css + script.js на ванильном JS с Tailwind CDN).
Задача
Создать визуализацию показателей продаж по регионам Казахстана за текущий месяц для презентации в Telegram-группе.
Кто пользуется
Руководство департамента, менеджеры по продажам (просмотр).
Что делает прототип
- Отображает сводные карточки (KPI) сверху: общая выручка, выполнение плана (%), количество сделок.
- Показывает интерактивную карту или таблицу регионов (Алматы, Астана, Шымкент, ЗКО, ВКО и др.) с цветовым кодированием выполнения плана.
- Отрисовывает столбчатую диаграмму (Bar Chart) продаж по каждому региону за месяц.
- Реализует фильтр по месяцам (выпадающий список), меняющий данные на графиках без перезагрузки страницы.
- Кнопка «Обновить данные» имитирует подгрузку свежих чисел.
- Адаптивная верстка для просмотра с мобильных устройств в Telegram.
Демо-данные
- 16 регионов РК (области + города республиканского значения).
- Реалистичные суммы продаж в тенге (диапазон 10–500 млн ₸).
- Статусы выполнения плана: «Выполнен», «В работе», «Отставание».
- Даты транзакций в формате ДД.ММ.ГГГГ за текущий месяц.
Допущения
- Данные хранятся только в браузере (localStorage), при очистке кэша сбрасываются.
- Валюта отображается в тенге (₸).
- График строится на библиотеке Chart.js (подключается через CDN).
Чего пока нет
- Авторизации и разграничения прав доступа.
- Интеграции с 1С, CRM и реальными базами данных.
- Выгрузки отчетов в Excel (только визуализация).
- Серверной части и постоянного хранилища.
Дизайн — дизайн-система KT AI
Весь интерфейс собирай на дизайн-системе KT AI, которая уже лежит в папке проекта design-system/.
Перед первой строкой вёрстки прочитай design.md и design-system/AGENTS.md и следуй им.
Подключай файлы ДС относительными путями и в этом порядке: ./design-system/kt-ai-fonts.css,
./design-system/kt-ai-tokens.css, ./design-system/kt-ai-components.css, ./design-system/kt-ai-page.css.
Тема по умолчанию — светлая: <html lang="ru" data-theme="light">; не ставь dark и не ставь auto
(auto уходит в тёмную по системной теме). Переключатель темы можно оставить, но открываться страница должна светлой.
Цвета, отступы и размеры — только токенами var(--kt-ai-…), иконки — из design-system/icons/kt-ai-lucide-sprite.svg.
Таблицы, списки, журналы, дашборды и формы собирай из готовых классов ДС (design-system/COMPONENTS.md),
архетип экрана выбирай по design-system/docs/ARCHETYPES.md. Каркас страницы — из design.md, с обычными <link>.
Шаблон design-system/templates/kt-ai-app-shell.html целиком не копируй: его скрипты-загрузчики (data-kt-ai-base-resolver,
data-kt-ai-boot) тянут CSS с корня сайта по абсолютному пути /design-system/…, а сайт публикуется в подпапке — стили не загрузятся.
Подключай только файлы, которые реально лежат в design-system/ (проверь ls design-system): файла kt-ai-components.js там нет.
Свой стиль не выдумывай, Bootstrap/Tailwind/Material/Google Fonts не подключай, сырые hex-цвета не пиши.
Папку design-system/ закоммить вместе с проектом — иначе опубликованная страница останется без стилей.