# Справочник тарифов КТ ## Тип решения Статический сайт (index.html + style.css + script.js на ванильном JS, Tailwind CDN). ## Задача Создать интерактивный справочник тарифов для сотрудников с возможностью поиска и фильтрации по регионам. ## Кто пользуется Сотрудники Департамента, менеджеры по продажам, консультанты контакт-центра. ## Что делает прототип - **Главный экран:** Отображает таблицу со всеми тарифами (Название, Скорость, Цена, Регион). Сверху выведены карточки-счётчики: «Всего тарифов» и количество тарифов по каждому региону. - **Поиск и фильтр:** Поле ввода для поиска по названию тарифа. Набор кнопок-чипсов (Region Filter) для фильтрации списка по регионам (Алматы, Астана, Шымкент, Регионы). - **Управление данными:** Кнопка «Добавить тариф» открывает модальное окно формы (поля: название, скорость, цена, регион). Эта же форма используется для редактирования при клике на строку таблицы. - **Действия в строке:** Кнопка «Удалить» в каждой строке вызывает подтверждение («Вы уверены?»), после чего удаляет запись и пишет событие в журнал изменений (внизу страницы: дата, действие, кто удалил). - **Экспорт:** Кнопка «Выгрузить в Excel» генерирует и скачивает CSV-файл с текущим отфильтрованным списком. - **Сохранение:** Все добавленные/измененные данные сохраняются в LocalStorage браузера и не пропадают после обновления страницы. - **Формат:** Даты в журнале и интерфейсе в формате ДД.ММ.ГГГГ. ## Демо-данные 15 записей. Реалистичные названия (Tariff Home, Fiber Optic, Mobile Pro), скорости (100 Мбит/с, 1 Гбит/с), цены в тенге (от 3000 до 15000), регионы (Алматы, Астана, Караганда, Актобе). ## Допущения - Владелец не указал конкретные поля для редактирования, добавлены стандартные поля из заявки. - Владелец не указал роли, функционал доступен всем без разграничения прав. ## Чего пока нет - Авторизации и личного кабинета. - Интеграции с CRM и реальными базами данных. - Серверной части (данные хранятся только в браузере пользователя). ## Дизайн — дизайн-система 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/` закоммить вместе с проектом — иначе опубликованная страница останется без стилей.