171 lines
7.5 KiB
HTML
171 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Розничные продажи · 2026</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
<div class="kt-ai-shell">
|
||
<aside class="kt-ai-sidebar">
|
||
<div class="kt-ai-brand">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<span class="kt-ai-brand-name">Розничные продажи</span>
|
||
</div>
|
||
<nav class="kt-ai-nav">
|
||
<div class="kt-ai-nav-group">
|
||
<a class="kt-ai-nav-item is-active" data-screen="overview" href="#">Обзор</a>
|
||
<a class="kt-ai-nav-item" data-screen="detail" href="#">Детали</a>
|
||
</div>
|
||
</nav>
|
||
<div class="kt-ai-sidebar-foot">
|
||
<span class="kt-ai-meta">Казахтелеком · 2026</span>
|
||
</div>
|
||
</aside>
|
||
<main class="kt-ai-main">
|
||
<header class="kt-ai-topbar">
|
||
<div class="kt-ai-topbar-title">
|
||
<span class="kt-ai-topbar-crumb kt-ai-meta">Продажи</span>
|
||
<h1 class="kt-ai-topbar-h1" id="screen-title">Обзор</h1>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-chip" data-tone="blue" id="period-chip">Янв — Сен 2026</span>
|
||
</header>
|
||
|
||
<!-- ЭКРАН: ОБЗОР -->
|
||
<section class="kt-ai-screen kt-ai-work-column-wide" id="screen-overview" data-gap="group">
|
||
<div class="kt-ai-kpi-strip" data-cards="true" id="kpi-overview"></div>
|
||
|
||
<div class="kt-ai-v" data-gap="block" id="overview-chart-block">
|
||
<div class="kt-ai-toolbar">
|
||
<div class="kt-ai-filterbar">
|
||
<h2 class="kt-ai-chart-title">Динамика выручки, млн ₸</h2>
|
||
<span class="kt-ai-spacer"></span>
|
||
<div class="kt-ai-h-stack" id="period-tabs" data-gap="tight"></div>
|
||
</div>
|
||
<div class="kt-ai-filterbar">
|
||
<div class="kt-ai-segmented" id="metric-tabs"></div>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-card kt-ai-chart-card">
|
||
<div class="kt-ai-chart" id="chart-overview"></div>
|
||
<div class="kt-ai-chart-legend" id="legend-overview"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-v" data-gap="block" id="overview-mix-block">
|
||
<div class="kt-ai-toolbar">
|
||
<div class="kt-ai-filterbar">
|
||
<h2 class="kt-ai-chart-title">Структура выручки по товарным группам</h2>
|
||
<span class="kt-ai-spacer"></span>
|
||
</div>
|
||
<div class="kt-ai-filterbar">
|
||
<div class="kt-ai-segmented" id="month-select"></div>
|
||
</div>
|
||
<div class="kt-ai-filterbar" id="mix-chips"></div>
|
||
</div>
|
||
<div class="kt-ai-card kt-ai-chart-card">
|
||
<div class="kt-ai-mix" id="mix-bars"></div>
|
||
<div class="kt-ai-table-wrap" style="margin-top:var(--kt-ai-space-6)">
|
||
<table class="kt-ai-table" id="table-mix">
|
||
<thead>
|
||
<tr>
|
||
<th>Товарная группа</th>
|
||
<th class="rt">Выручка, млн ₸</th>
|
||
<th class="rt">Доля, %</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ЭКРАН: ДЕТАЛИ -->
|
||
<section class="kt-ai-screen kt-ai-work-column-wide" id="screen-detail" data-gap="group" hidden>
|
||
<div class="kt-ai-kpi-strip" data-cards="true" id="kpi-detail"></div>
|
||
|
||
<div class="kt-ai-v" data-gap="block" id="detail-months-block">
|
||
<div class="kt-ai-toolbar">
|
||
<div class="kt-ai-filterbar">
|
||
<h2 class="kt-ai-chart-title">Выручка по месяцам, млн ₸</h2>
|
||
<span class="kt-ai-spacer"></span>
|
||
<input type="search" class="kt-ai-input" id="search-months" placeholder="Найти месяц…" style="width:200px">
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-card kt-ai-chart-card">
|
||
<div class="kt-ai-table-wrap">
|
||
<table class="kt-ai-table" id="table-months">
|
||
<thead>
|
||
<tr>
|
||
<th data-sort="label" class="sortable">Месяц</th>
|
||
<th data-sort="revenue" class="sortable rt">Выручка, млн ₸</th>
|
||
<th data-sort="orders" class="sortable rt">Заказы</th>
|
||
<th data-sort="avg" class="sortable rt">Средний чек, ₸</th>
|
||
<th class="rt">К пред. мес., %</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="kt-ai-empty" id="empty-months" hidden>
|
||
<p>Ничего не найдено</p>
|
||
<span class="kt-ai-meta">Попробуйте изменить запрос</span>
|
||
<button class="kt-ai-btn" data-size="sm" id="clear-search" type="button">Сбросить поиск</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-v" data-gap="block" id="detail-tables-block">
|
||
<div class="kt-ai-toolbar">
|
||
<div class="kt-ai-filterbar">
|
||
<h2 class="kt-ai-chart-title">Разбивка по товарным группам</h2>
|
||
<span class="kt-ai-spacer"></span>
|
||
<div class="kt-ai-filterbar-row" style="display:flex;flex-wrap:wrap;gap:var(--kt-ai-space-3)">
|
||
<select class="kt-ai-select" id="sel-period" style="width:160px"></select>
|
||
<select class="kt-ai-select" id="sel-group" style="width:170px"></select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-v" data-gap="block">
|
||
<div class="kt-ai-card kt-ai-chart-card">
|
||
<div class="kt-ai-chart" id="chart-detail"></div>
|
||
</div>
|
||
<div class="kt-ai-card kt-ai-chart-card">
|
||
<div class="kt-ai-table-wrap">
|
||
<table class="kt-ai-table" id="table-detail">
|
||
<thead>
|
||
<tr>
|
||
<th data-sort="label" class="sortable">Период</th>
|
||
<th class="rt" data-sort="revenue">Выручка, млн ₸</th>
|
||
<th class="rt" data-sort="orders">Заказы</th>
|
||
<th class="rt" data-sort="avg">Средний чек, ₸</th>
|
||
<th class="rt" data-sort="share">Доля, %</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="kt-ai-empty" id="empty-detail" hidden>
|
||
<p>По выбранному периоду и товарной группе данных нет</p>
|
||
<span class="kt-ai-meta">Выберите другие параметры в фильтрах</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
<script src="design-system/kt-ai-chart-tip.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|