# Дашборд продаж по регионам ## Тип решения Статический сайт (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`. Тема по умолчанию — светлая: ``; не ставь `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`, с обычными ``. Шаблон `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/` закоммить вместе с проектом — иначе опубликованная страница останется без стилей.