142 lines
6.3 KiB
HTML
142 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Дашборд продаж по регионам — Казахтелеком</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="style.css">
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
|
||
<div class="kt-ai-shell dash-shell">
|
||
<aside class="kt-ai-sidebar dash-sidebar">
|
||
<div class="kt-ai-sidebar-brand">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="24">
|
||
<span class="dash-brand-name">Дашборд продаж</span>
|
||
</div>
|
||
<nav class="kt-ai-sidebar-nav">
|
||
<div class="kt-ai-nav-group">
|
||
<a class="kt-ai-nav-item is-active" href="#">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="design-system/icons/kt-ai-lucide-sprite.svg#dashboard"></use></svg>
|
||
<span>Регионы</span>
|
||
</a>
|
||
<a class="kt-ai-nav-item" href="#" data-soon="true">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="design-system/icons/kt-ai-lucide-sprite.svg#chart"></use></svg>
|
||
<span>Динамика</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
<div class="dash-sidebar-note">Казахстан · 17 регионов</div>
|
||
</aside>
|
||
|
||
<main class="dash-main">
|
||
<header class="dash-topbar">
|
||
<div class="dash-topbar-titles">
|
||
<span class="dash-crumb">Продажи</span>
|
||
<h1 class="dash-title">По регионам</h1>
|
||
</div>
|
||
<div class="dash-topbar-actions">
|
||
<div class="kt-ai-select-wrap" style="min-width:170px">
|
||
<select class="kt-ai-select" id="monthSelect" aria-label="Период"></select>
|
||
</div>
|
||
<button class="kt-ai-btn kt-ai-btn-sm" id="refreshBtn" type="button">
|
||
<svg class="kt-icon kt-icon-sm" aria-hidden="true"><use href="design-system/icons/kt-ai-lucide-sprite.svg#refresh"></use></svg>
|
||
Обновить данные
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="kt-ai-kpi-strip dash-kpis" id="kpiStrip">
|
||
<div class="kt-ai-kpi" data-kpi="revenue">
|
||
<span class="label">Выручка</span>
|
||
<span class="value" data-long="true" id="kpiRevenue">—</span>
|
||
<span class="hint" id="kpiRevenueHint">за период</span>
|
||
</div>
|
||
<div class="kt-ai-kpi" data-kpi="plan">
|
||
<span class="label">Выполнение плана</span>
|
||
<span class="value" id="kpiPlan">—</span>
|
||
<span class="hint" id="kpiPlanHint">факт / план</span>
|
||
</div>
|
||
<div class="kt-ai-kpi" data-kpi="deals">
|
||
<span class="label">Сделки</span>
|
||
<span class="value" id="kpiDeals">—</span>
|
||
<span class="hint" id="kpiDealsHint">закрыто за период</span>
|
||
</div>
|
||
<div class="kt-ai-kpi" data-kpi="leaders">
|
||
<span class="label">Лидеры по плану</span>
|
||
<span class="value" id="kpiLeaders">—</span>
|
||
<span class="hint">из 5 топовых регионов</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dash-grid">
|
||
<section class="dash-panel" aria-label="Карта регионов">
|
||
<div class="dash-panel-head">
|
||
<h2>Карта регионов</h2>
|
||
<div class="dash-legend">
|
||
<span class="dash-legend-item"><i class="dash-legend-dot" data-tone="ok"></i>выполнен</span>
|
||
<span class="dash-legend-item"><i class="dash-legend-dot" data-tone="warn"></i>90–99%</span>
|
||
<span class="dash-legend-item"><i class="dash-legend-dot" data-tone="risk"></i>ниже 90%</span>
|
||
</div>
|
||
</div>
|
||
<div class="dash-map-wrap">
|
||
<svg id="kzMap" viewBox="0 0 1000 420" role="img" aria-label="Карта Казахстана по регионам"></svg>
|
||
</div>
|
||
<div class="dash-map-selected" id="mapSelected"></div>
|
||
</section>
|
||
|
||
<section class="dash-panel" aria-label="Сравнение плана и факта">
|
||
<div class="dash-panel-head">
|
||
<h2>План и факт по выручке</h2>
|
||
<span class="dash-panel-hint" id="chartHint"></span>
|
||
</div>
|
||
<div class="dash-chart" id="chartBars"></div>
|
||
</section>
|
||
</div>
|
||
|
||
<section class="dash-panel" aria-label="Регионы">
|
||
<div class="dash-panel-head">
|
||
<h2>Регионы</h2>
|
||
<span class="dash-panel-hint" id="tableCount"></span>
|
||
</div>
|
||
<div class="kt-ai-toolbar" style="display:flex;gap:var(--kt-ai-space-4);flex-wrap:wrap;align-items:center;margin-bottom:var(--kt-ai-space-5)">
|
||
<input class="kt-ai-input dash-search" id="searchInput" type="search" placeholder="Найти регион" aria-label="Поиск по регионам">
|
||
<div class="dash-sort" role="group" aria-label="Сортировка">
|
||
<button class="kt-ai-btn kt-ai-btn-sm" data-sort="actual" type="button">По выручке</button>
|
||
<button class="kt-ai-btn kt-ai-btn-sm" data-sort="percent" type="button">По %</button>
|
||
<button class="kt-ai-btn kt-ai-btn-sm" data-sort="name" type="button">По алфавиту</button>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-table-wrap" style="border:none">
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="kt-ai-sticky-first">Регион</th>
|
||
<th class="dash-num">План</th>
|
||
<th class="dash-num">Факт</th>
|
||
<th class="dash-num">%</th>
|
||
<th class="dash-num">Сделки</th>
|
||
<th>Статус</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="regionsTable"></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="kt-ai-empty" id="tableEmpty" hidden>
|
||
<p>По запросу регионы не найдены</p>
|
||
<button class="kt-ai-btn kt-ai-btn-sm" id="clearSearch" type="button">Сбросить поиск</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="design-system/kt-ai-chart-tip.js"></script>
|
||
<script src="data-kt.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|