From b3ec72ca34b3d010d015307b813a446c7d7ad737 Mon Sep 17 00:00:00 2001
From: Iliyas <ilyas.kyrykbaev@gmail.com>
Date: Wed, 17 Jun 2026 13:09:00 +0500
Subject: [PATCH] =?UTF-8?q?feat(=D0=9C=D0=B5=D1=82=D1=80=D0=B8=D0=BA=D0=B8?=
 =?UTF-8?q?=20=D0=9C=D0=9F):=20top=20KPI=20cards,=20grid/list=20toggle,=20?=
 =?UTF-8?q?clickable=20cards=20with=20chart=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 4 top KPI cards (registrations, downloads by OS+total, MAU, DAU) from
  drb_iliyas_telecomkz_daily_info + telecomkz_mau_stats; JSON gets top{} block
- grid/list view toggle (list = full-width cards), persisted in localStorage
- click any card -> modal with Chart.js line chart + per-month table; tooltip
  shows monthly delta for both years; ESC/overlay/✕ to close
---
 app_stats/index.html          | 566 ++++++++++++++++++++++++++--------
 updater/update_app_metrics.py | 117 +++++++
 2 files changed, 554 insertions(+), 129 deletions(-)

diff --git a/app_stats/index.html b/app_stats/index.html
index aad39d6..1e259ac 100644
--- a/app_stats/index.html
+++ b/app_stats/index.html
@@ -6,6 +6,7 @@
 <title>Метрики МП — Казахтелеком 2026</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
 <style>
 :root {
   --color-bg: #F4F6F9;
@@ -110,11 +111,55 @@ select.txt-input { cursor: pointer; background: #fff; }
 .legend .dot.prev { background: #C7D2E8; }
 .empty-note { text-align: center; color: var(--color-text-secondary); padding: 40px; grid-column: 1 / -1; }
 
+/* ── TOP KPI CARDS ── */
+.section-title { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin: 4px 0 12px; }
+.top-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
+.kpi-stat { background: var(--color-surface); border-radius: var(--radius-card); padding: 16px 18px; box-shadow: var(--shadow-card); border-top: 4px solid var(--color-brand); cursor: pointer; transition: box-shadow 0.2s, transform 0.2s; }
+.kpi-stat:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
+.kpi-stat.accent-green  { border-top-color: var(--color-green); }
+.kpi-stat.accent-purple { border-top-color: var(--color-purple); }
+.kpi-stat.accent-yellow { border-top-color: var(--color-orange); }
+.kpi-stat-value { font-size: 26px; font-weight: 700; font-family: var(--font-mono); line-height: 1.1; margin-top: 2px; }
+.kpi-stat-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; min-height: 16px; }
+
+/* ── VIEW TOGGLE ── */
+.view-toggle { display: flex; gap: 4px; }
+.view-toggle button { padding: 8px 11px; border: 1px solid var(--color-border); background: #fff; cursor: pointer; border-radius: var(--radius-btn); color: var(--color-text-secondary); font-family: var(--font-base); font-size: 14px; line-height: 1; transition: all 0.15s; }
+.view-toggle button:hover { border-color: var(--color-brand); color: var(--color-brand); }
+.view-toggle button.active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
+
+/* ── LIST VIEW ── */
+.card { cursor: pointer; }
+.cards.list { grid-template-columns: 1fr; }
+.cards.list .card { display: grid; grid-template-columns: minmax(190px, 1.1fr) 130px minmax(160px, 2fr) minmax(150px, auto); align-items: center; gap: 22px; }
+.cards.list .card-head { margin-bottom: 0; }
+.cards.list .card-value { font-size: 24px; }
+.cards.list .spark { margin-top: 0; height: 44px; }
+.cards.list .spark-x { display: none; }
+.cards.list .legend { margin-top: 0; flex-direction: column; gap: 5px; }
+
+/* ── MODAL ── */
+.modal-overlay { position: fixed; inset: 0; background: rgba(17,24,39,0.55); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
+.modal-overlay.open { display: flex; }
+.modal-box { background: #fff; border-radius: 16px; max-width: 880px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
+.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: #fff; z-index: 1; }
+.modal-title { font-size: 18px; font-weight: 700; }
+.modal-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; }
+.modal-close { background: var(--color-bg); border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 16px; color: var(--color-text-secondary); flex-shrink: 0; }
+.modal-close:hover { background: var(--color-border); }
+.modal-body { padding: 20px 24px; }
+.modal-chart-wrap { position: relative; height: 300px; margin-bottom: 20px; }
+.mtable { width: 100%; border-collapse: collapse; font-size: 13px; }
+.mtable th, .mtable td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--color-border); font-family: var(--font-mono); white-space: nowrap; }
+.mtable th:first-child, .mtable td:first-child { text-align: left; font-family: var(--font-base); }
+.mtable th { font-weight: 600; color: var(--color-text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; }
+.mtable tbody tr:last-child td { font-weight: 700; }
+
 /* loading / error */
 #status-msg { text-align:center; padding: 60px 20px; color: var(--color-text-secondary); }
 
-@media (max-width: 900px) { .summary-grid { grid-template-columns: repeat(2,1fr); } }
-@media (max-width: 560px) { .summary-grid { grid-template-columns: 1fr; } }
+@media (max-width: 900px) { .summary-grid, .top-grid { grid-template-columns: repeat(2,1fr); } .cards.list .card { grid-template-columns: 1fr; gap: 10px; } }
+@media (max-width: 560px) { .summary-grid, .top-grid { grid-template-columns: 1fr; } }
 </style>
 </head>
 <body>
@@ -151,6 +196,10 @@ select.txt-input { cursor: pointer; background: #fff; }
     <div id="status-msg">Загрузка данных…</div>
 
     <div id="content" style="display:none">
+      <div class="section-title">Ключевые показатели приложения</div>
+      <div class="top-grid" id="top-grid"></div>
+
+      <div class="section-title">Сравнение функций · год к году</div>
       <div class="summary-grid" id="summary-grid"></div>
 
       <div class="controls">
@@ -161,6 +210,10 @@ select.txt-input { cursor: pointer; background: #fff; }
           <option value="label">по названию (А→Я)</option>
         </select>
         <label><input type="checkbox" id="only-new"> только новые</label>
+        <div class="view-toggle">
+          <button data-view="grid" title="Сетка">▦</button>
+          <button data-view="list" title="Список">☰</button>
+        </div>
       </div>
 
       <div class="cards" id="cards"></div>
@@ -168,19 +221,33 @@ select.txt-input { cursor: pointer; background: #fff; }
   </div>
 </div>
 
+<!-- MODAL -->
+<div class="modal-overlay" id="modal">
+  <div class="modal-box">
+    <div class="modal-head">
+      <div>
+        <div class="modal-title" id="modal-title"></div>
+        <div class="modal-sub" id="modal-sub"></div>
+      </div>
+      <button class="modal-close" id="modal-close" title="Закрыть">✕</button>
+    </div>
+    <div class="modal-body" id="modal-body"></div>
+  </div>
+</div>
+
 <script>
 const LOGIN_PASSWORD = 'KTdash1';
 const DATA_URL = 'app_metrics.json';
 
 // Резервные данные (на случай file:// или недоступности файла). Обновляются скриптом updater.
 const EMBEDDED_METRICS = /*__DATA__*/{
-  "generated_at": "2026-06-16T17:55:07",
+  "generated_at": "2026-06-17T13:02:59",
   "cur_year": 2026,
   "prev_year": 2025,
-  "period_label": "с 1 января по 15 июня",
+  "period_label": "с 1 января по 16 июня",
   "range": {
     "start": "2026-01-01",
-    "end": "2026-06-15"
+    "end": "2026-06-16"
   },
   "months": [
     1,
@@ -203,17 +270,17 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "my_services",
       "label": "Мои услуги",
-      "cur": 1769470,
-      "prev": 1464715,
-      "growth": 0.2080643674708049,
+      "cur": 1796228,
+      "prev": 1472562,
+      "growth": 0.21979787608263693,
       "is_new": false,
       "cur_cum": [
         321989,
         621597,
         980877,
-        1327884,
-        1676590,
-        1769470
+        1327890,
+        1676682,
+        1796228
       ],
       "prev_cum": [
         308264,
@@ -221,23 +288,23 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         857453,
         1108674,
         1341165,
-        1464715
+        1472562
       ]
     },
     {
       "key": "traffic",
       "label": "Детализация трафика",
-      "cur": 1271563,
-      "prev": 1083912,
-      "growth": 0.17312383293108666,
+      "cur": 1290610,
+      "prev": 1089617,
+      "growth": 0.18446206327544448,
       "is_new": false,
       "cur_cum": [
         246604,
         463349,
         727262,
-        978019,
-        1179021,
-        1271563
+        978030,
+        1179069,
+        1290610
       ],
       "prev_cum": [
         214948,
@@ -245,23 +312,23 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         634594,
         827602,
         1001634,
-        1083912
+        1089617
       ]
     },
     {
       "key": "payments",
       "label": "Платежи",
-      "cur": 730185,
-      "prev": 555155,
-      "growth": 0.31528131783015556,
+      "cur": 741888,
+      "prev": 557497,
+      "growth": 0.3307479681505013,
       "is_new": false,
       "cur_cum": [
         111523,
         203960,
         358189,
-        523887,
-        653394,
-        730185
+        523890,
+        653416,
+        741888
       ],
       "prev_cum": [
         120062,
@@ -269,23 +336,23 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         331976,
         427765,
         512345,
-        555155
+        557497
       ]
     },
     {
       "key": "orders",
       "label": "Заявки",
-      "cur": 826255,
-      "prev": 638026,
-      "growth": 0.2950177578970136,
+      "cur": 845340,
+      "prev": 642020,
+      "growth": 0.31668795364630387,
       "is_new": false,
       "cur_cum": [
         173075,
         312944,
         461361,
-        601607,
-        742766,
-        826255
+        601613,
+        742794,
+        845340
       ],
       "prev_cum": [
         153918,
@@ -293,23 +360,23 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         409051,
         500862,
         587480,
-        638026
+        642020
       ]
     },
     {
       "key": "loyalty",
       "label": "Лояльность",
-      "cur": 470969,
-      "prev": 465354,
-      "growth": 0.012066083024965939,
+      "cur": 474289,
+      "prev": 466803,
+      "growth": 0.016036743551348213,
       "is_new": false,
       "cur_cum": [
         86429,
         152587,
         264979,
-        351819,
-        432695,
-        470969
+        351823,
+        432724,
+        474289
       ],
       "prev_cum": [
         88583,
@@ -317,23 +384,23 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         284932,
         371536,
         431175,
-        465354
+        466803
       ]
     },
     {
       "key": "pay",
       "label": "Оплата",
-      "cur": 337103,
-      "prev": 303542,
-      "growth": 0.11056460061540084,
+      "cur": 341470,
+      "prev": 305025,
+      "growth": 0.11948200967133842,
       "is_new": false,
       "cur_cum": [
         73119,
         141842,
         198550,
-        248838,
-        304803,
-        337103
+        248839,
+        304810,
+        341470
       ],
       "prev_cum": [
         50344,
@@ -341,23 +408,23 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         150536,
         205493,
         269251,
-        303542
+        305025
       ]
     },
     {
       "key": "billing_detail",
       "label": "Детали счета",
-      "cur": 496915,
-      "prev": 358855,
-      "growth": 0.38472363489431666,
+      "cur": 502390,
+      "prev": 359719,
+      "growth": 0.39661791565082744,
       "is_new": false,
       "cur_cum": [
         81176,
         147137,
         241789,
-        343223,
-        431096,
-        496915
+        343225,
+        431112,
+        502390
       ],
       "prev_cum": [
         62482,
@@ -365,7 +432,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         200427,
         260559,
         315518,
-        358855
+        359719
       ]
     },
     {
@@ -395,17 +462,17 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "partners",
       "label": "Акции партнеров",
-      "cur": 197009,
-      "prev": 94796,
-      "growth": 1.0782416979619394,
+      "cur": 197777,
+      "prev": 95016,
+      "growth": 1.0815125873537088,
       "is_new": false,
       "cur_cum": [
         40566,
         65001,
         117646,
-        149938,
-        185887,
-        197009
+        149940,
+        185907,
+        197777
       ],
       "prev_cum": [
         27730,
@@ -413,23 +480,23 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         65023,
         75359,
         89282,
-        94796
+        95016
       ]
     },
     {
       "key": "tv_plus",
       "label": "TV+",
-      "cur": 64104,
-      "prev": 95883,
-      "growth": -0.33143518663370986,
+      "cur": 65461,
+      "prev": 96208,
+      "growth": -0.31958880758356895,
       "is_new": false,
       "cur_cum": [
         11947,
         20939,
         33969,
         45372,
-        56323,
-        64104
+        56326,
+        65461
       ],
       "prev_cum": [
         24830,
@@ -437,23 +504,23 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         61671,
         76824,
         90692,
-        95883
+        96208
       ]
     },
     {
       "key": "boosters",
       "label": "Бустеры",
-      "cur": 121065,
-      "prev": 54053,
-      "growth": 1.2397461750504135,
+      "cur": 123015,
+      "prev": 54525,
+      "growth": 1.256121045392022,
       "is_new": false,
       "cur_cum": [
         15882,
         33486,
         61530,
-        88553,
-        114321,
-        121065
+        88555,
+        114328,
+        123015
       ],
       "prev_cum": [
         7244,
@@ -461,23 +528,23 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         18093,
         31284,
         49552,
-        54053
+        54525
       ]
     },
     {
       "key": "roaming",
       "label": "Роуминг",
-      "cur": 22160,
-      "prev": 39403,
-      "growth": -0.43760627363398724,
+      "cur": 22826,
+      "prev": 39835,
+      "growth": -0.4269863185640768,
       "is_new": false,
       "cur_cum": [
         2924,
         5494,
         8974,
         11894,
-        18915,
-        22160
+        18923,
+        22826
       ],
       "prev_cum": [
         6678,
@@ -485,23 +552,23 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         19649,
         27201,
         35474,
-        39403
+        39835
       ]
     },
     {
       "key": "pereoform",
       "label": "Переоформление",
-      "cur": 34570,
-      "prev": 23644,
-      "growth": 0.46210455083742175,
+      "cur": 35385,
+      "prev": 23802,
+      "growth": 0.48663977816990167,
       "is_new": false,
       "cur_cum": [
         7556,
         12691,
         18718,
-        24710,
-        30986,
-        34570
+        24711,
+        30988,
+        35385
       ],
       "prev_cum": [
         4876,
@@ -509,13 +576,13 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         13556,
         17422,
         21572,
-        23644
+        23802
       ]
     },
     {
       "key": "aitu_music",
       "label": "Aitu Music",
-      "cur": 8651,
+      "cur": 8872,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -524,8 +591,8 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         1048,
         4000,
         5553,
-        7270,
-        8651
+        7271,
+        8872
       ],
       "prev_cum": [
         0,
@@ -539,9 +606,9 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "online_booking",
       "label": "Онлайн очередь",
-      "cur": 22144,
-      "prev": 5449,
-      "growth": 3.063864929344834,
+      "cur": 22529,
+      "prev": 5523,
+      "growth": 3.0791236646749955,
       "is_new": false,
       "cur_cum": [
         5636,
@@ -549,7 +616,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         13892,
         17262,
         20514,
-        22144
+        22529
       ],
       "prev_cum": [
         0,
@@ -557,13 +624,13 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         0,
         1848,
         4407,
-        5449
+        5523
       ]
     },
     {
       "key": "my_docs",
       "label": "Мои документы",
-      "cur": 53376,
+      "cur": 54148,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -572,8 +639,8 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         24658,
         33590,
         41765,
-        49552,
-        53376
+        49555,
+        54148
       ],
       "prev_cum": [
         0,
@@ -587,7 +654,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "dz_statement",
       "label": "Справка о ДЗ",
-      "cur": 132795,
+      "cur": 134463,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -595,9 +662,9 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         35454,
         64672,
         85004,
-        100574,
-        119910,
-        132795
+        100575,
+        119914,
+        134463
       ],
       "prev_cum": [
         0,
@@ -611,7 +678,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "new_boosters_roaming_kcell",
       "label": "Новая линейка бустеров и роумингов Кселл",
-      "cur": 28626,
+      "cur": 28858,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -620,8 +687,8 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         4523,
         13318,
         21056,
-        28239,
-        28626
+        28240,
+        28858
       ],
       "prev_cum": [
         0,
@@ -659,7 +726,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "law_and_order",
       "label": "Закон и порядок",
-      "cur": 1555,
+      "cur": 1598,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -669,7 +736,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         671,
         1034,
         1377,
-        1555
+        1598
       ],
       "prev_cum": [
         0,
@@ -683,7 +750,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "acs",
       "label": "ACS",
-      "cur": 9154,
+      "cur": 9447,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -693,7 +760,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         7499,
         7800,
         8174,
-        9154
+        9447
       ],
       "prev_cum": [
         0,
@@ -707,7 +774,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "kaspi_freedom_pay",
       "label": "Прием платежей через Freedom и Kaspi",
-      "cur": 61481,
+      "cur": 62724,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -716,8 +783,8 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         8427,
         24816,
         39893,
-        53444,
-        61481
+        53445,
+        62724
       ],
       "prev_cum": [
         0,
@@ -731,7 +798,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "csat",
       "label": "CSAT",
-      "cur": 2486,
+      "cur": 4057,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -741,7 +808,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         0,
         0,
         0,
-        2486
+        4057
       ],
       "prev_cum": [
         0,
@@ -755,7 +822,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "multicustomer",
       "label": "Мультикастомер",
-      "cur": 164,
+      "cur": 169,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -765,7 +832,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         0,
         0,
         99,
-        164
+        169
       ],
       "prev_cum": [
         0,
@@ -779,7 +846,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "tv_plus_setup",
       "label": "Настройка TV+",
-      "cur": 4545,
+      "cur": 4908,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -788,8 +855,8 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         0,
         0,
         0,
-        2628,
-        4545
+        2630,
+        4908
       ],
       "prev_cum": [
         0,
@@ -803,7 +870,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "static_ip",
       "label": "Статический IP",
-      "cur": 108,
+      "cur": 119,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -813,7 +880,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         0,
         35,
         75,
-        108
+        119
       ],
       "prev_cum": [
         0,
@@ -827,7 +894,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "turbo_button",
       "label": "Turbo кнопка",
-      "cur": 4312,
+      "cur": 4638,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -837,7 +904,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         0,
         498,
         2789,
-        4312
+        4638
       ],
       "prev_cum": [
         0,
@@ -851,7 +918,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
     {
       "key": "real_estate_docs",
       "label": "Справка о недвижимости",
-      "cur": 78,
+      "cur": 79,
       "prev": 0,
       "growth": null,
       "is_new": true,
@@ -861,7 +928,7 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         44,
         52,
         70,
-        78
+        79
       ],
       "prev_cum": [
         0,
@@ -872,7 +939,91 @@ const EMBEDDED_METRICS = /*__DATA__*/{
         0
       ]
     }
-  ]
+  ],
+  "top": {
+    "as_of": "2026-06-16",
+    "registered_total": 1078231,
+    "installs_total": 2307490,
+    "installs_ios": 924083,
+    "installs_android": 1383407,
+    "mau": 185155,
+    "dau": 17757,
+    "trend_labels": [
+      "Июн 25",
+      "Июл 25",
+      "Авг 25",
+      "Сен 25",
+      "Окт 25",
+      "Ноя 25",
+      "Дек 25",
+      "Янв 26",
+      "Фев 26",
+      "Мар 26",
+      "Апр 26",
+      "Май 26",
+      "Июн 26"
+    ],
+    "registered_series": [
+      925945,
+      937312,
+      949404,
+      961772,
+      973331,
+      985194,
+      1000768,
+      1016923,
+      1030968,
+      1043887,
+      1056398,
+      1068794,
+      1078231
+    ],
+    "installs_series": [
+      1485273,
+      1519017,
+      1552922,
+      1722057,
+      1803173,
+      1879957,
+      1973234,
+      2053773,
+      2131472,
+      2176215,
+      2215453,
+      2260248,
+      2307490
+    ],
+    "mau_series": [
+      203025,
+      137297,
+      147812,
+      123950,
+      92999,
+      92384,
+      117661,
+      174283,
+      165292,
+      182520,
+      178778,
+      162540,
+      121894
+    ],
+    "dau_series": [
+      35538,
+      18569,
+      19517,
+      15670,
+      11862,
+      12247,
+      17946,
+      27955,
+      28326,
+      29972,
+      28007,
+      25391,
+      26288
+    ]
+  }
 };
 
 const App = { data: null };
@@ -954,7 +1105,7 @@ function renderCards() {
     const curCum = m.cur_cum || [m.cur];
     const prevCum = m.prev_cum || [m.prev];
     return `
-    <div class="card ${cls}">
+    <div class="card ${cls}" data-key="${m.key}">
       <div class="card-head">
         <div>
           <div class="card-title">${m.label}</div>
@@ -989,13 +1140,153 @@ function sparkline(curCum, prevCum) {
   </svg>`;
 }
 
+// ───────── верхние KPI ─────────
+const ACCENT_COLOR = { '': '#0052CC', 'accent-green': '#10B981', 'accent-purple': '#8B5CF6', 'accent-yellow': '#F97316' };
+
+function fmtDate(s) {
+  if (!s) return '—';
+  const p = String(s).slice(0, 10).split('-');
+  return p.length === 3 ? `${p[2]}.${p[1]}.${p[0]}` : s;
+}
+function delta(cum) { return cum.map((v, i) => i === 0 ? v : v - cum[i - 1]); }
+
+// одиночный мини-график (одна линия)
+function miniline(series, color) {
+  if (!series || !series.length) return '';
+  const W = 100, H = 30, pad = 3, n = series.length;
+  const max = Math.max(...series), min = Math.min(...series), span = (max - min) || 1;
+  const x = i => n <= 1 ? W / 2 : pad + i * (W - 2 * pad) / (n - 1);
+  const y = v => H - pad - ((v - min) / span) * (H - 2 * pad);
+  const pts = series.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');
+  return `<svg class="spark" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none">
+    <polyline points="${pts}" style="fill:none;stroke:${color};stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round"/></svg>`;
+}
+
+function renderTop() {
+  const t = App.data.top;
+  const grid = document.getElementById('top-grid');
+  const title = grid.previousElementSibling;
+  if (!t) { grid.style.display = 'none'; if (title) title.style.display = 'none'; return; }
+  const cards = [
+    { key: 'registered', accent: '', label: 'Регистрации', value: fmtInt(t.registered_total), sub: 'всего зарегистрировано', series: t.registered_series },
+    { key: 'installs', accent: 'accent-green', label: 'Скачивания', value: fmtInt(t.installs_total), sub: `iOS ${fmtInt(t.installs_ios)} · Android ${fmtInt(t.installs_android)}`, series: t.installs_series },
+    { key: 'mau', accent: 'accent-purple', label: 'MAU', value: fmtInt(t.mau), sub: 'на ' + fmtDate(t.as_of), series: t.mau_series },
+    { key: 'dau', accent: 'accent-yellow', label: 'DAU', value: fmtInt(t.dau), sub: 'на ' + fmtDate(t.as_of), series: t.dau_series },
+  ];
+  grid.innerHTML = cards.map(c => `
+    <div class="kpi-stat ${c.accent}" data-top="${c.key}">
+      <div class="sum-label">${c.label}</div>
+      <div class="kpi-stat-value">${c.value}</div>
+      <div class="kpi-stat-sub">${c.sub}</div>
+      ${miniline(c.series, ACCENT_COLOR[c.accent])}
+    </div>`).join('');
+}
+
+// ───────── вид: сетка / список ─────────
+function setView(v) {
+  App.view = v;
+  try { localStorage.setItem('mp_view', v); } catch (e) {}
+  document.getElementById('cards').classList.toggle('list', v === 'list');
+  document.querySelectorAll('.view-toggle button').forEach(b => b.classList.toggle('active', b.dataset.view === v));
+}
+
+// ───────── модалка ─────────
+let modalChart = null;
+function closeModal() {
+  document.getElementById('modal').classList.remove('open');
+  if (modalChart) { modalChart.destroy(); modalChart = null; }
+}
+function openModal(title, sub, bodyHTML) {
+  document.getElementById('modal-title').textContent = title;
+  document.getElementById('modal-sub').textContent = sub;
+  document.getElementById('modal-body').innerHTML = bodyHTML;
+  document.getElementById('modal').classList.add('open');
+}
+function drawChart(labels, datasets, monthlyMap) {
+  if (typeof Chart === 'undefined') return;
+  const ctx = document.getElementById('modal-canvas');
+  if (!ctx) return;
+  modalChart = new Chart(ctx, {
+    type: 'line',
+    data: { labels, datasets: datasets.map(s => ({
+      label: s.label, data: s.data, borderColor: s.color, backgroundColor: s.color,
+      borderWidth: 2.5, tension: 0.3, pointRadius: 3, pointHoverRadius: 5, fill: false,
+      borderDash: s.dash || [],
+    })) },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      interaction: { mode: 'index', intersect: false },
+      plugins: {
+        legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } },
+        tooltip: { callbacks: { label: (c) => {
+          const base = `${c.dataset.label}: ${fmtInt(c.parsed.y)}`;
+          const mo = monthlyMap && monthlyMap[c.dataset.label];
+          return mo ? `${base}  (за месяц +${fmtInt(mo[c.dataIndex])})` : base;
+        } } },
+      },
+      scales: { y: { ticks: { callback: v => fmtInt(v) }, grid: { color: '#F0F2F5' } }, x: { grid: { display: false } } },
+    },
+  });
+}
+
+function openMetricModal(key) {
+  const d = App.data, m = d.metrics.find(x => x.key === key);
+  if (!m) return;
+  const labels = d.month_labels || [];
+  const curCum = m.cur_cum || [m.cur], prevCum = m.prev_cum || [m.prev];
+  const curMo = delta(curCum), prevMo = delta(prevCum);
+  const cy = String(d.cur_year), py = String(d.prev_year);
+  let rows = '';
+  for (let i = 0; i < labels.length; i++) {
+    rows += `<tr><td>${labels[i]}</td><td>${fmtInt(curCum[i])}</td><td>+${fmtInt(curMo[i])}</td><td>${fmtInt(prevCum[i])}</td><td>+${fmtInt(prevMo[i])}</td></tr>`;
+  }
+  const body = `
+    <div class="modal-chart-wrap"><canvas id="modal-canvas"></canvas></div>
+    <table class="mtable">
+      <thead><tr><th>Месяц</th><th>${cy} ∑</th><th>${cy} /мес</th><th>${py} ∑</th><th>${py} /мес</th></tr></thead>
+      <tbody>${rows}</tbody>
+    </table>`;
+  openModal(m.label, `Нарастающим итогом · ${d.period_label}`, body);
+  drawChart(labels, [
+    { label: cy, data: curCum, color: '#0052CC' },
+    { label: py, data: prevCum, color: '#9CB4D9', dash: [5, 4] },
+  ], { [cy]: curMo, [py]: prevMo });
+}
+
+function openTopModal(key) {
+  const t = App.data.top;
+  if (!t) return;
+  const labels = t.trend_labels || [];
+  const conf = {
+    registered: { title: 'Регистрации', color: '#0052CC', data: t.registered_series, note: 'Накопительно (всего зарегистрировано)' },
+    installs: { title: 'Скачивания', color: '#10B981', data: t.installs_series, note: `Накопительно · iOS ${fmtInt(t.installs_ios)} · Android ${fmtInt(t.installs_android)}` },
+    mau: { title: 'MAU', color: '#8B5CF6', data: t.mau_series, note: 'Среднемесячное число активных за месяц' },
+    dau: { title: 'DAU', color: '#F97316', data: t.dau_series, note: 'Среднесуточное число активных за месяц' },
+  }[key];
+  if (!conf) return;
+  let rows = '';
+  for (let i = 0; i < labels.length; i++) rows += `<tr><td>${labels[i]}</td><td>${fmtInt(conf.data[i])}</td></tr>`;
+  const body = `
+    <div class="modal-chart-wrap"><canvas id="modal-canvas"></canvas></div>
+    <table class="mtable">
+      <thead><tr><th>Месяц</th><th>${conf.title}</th></tr></thead>
+      <tbody>${rows}</tbody>
+    </table>`;
+  openModal(conf.title, conf.note + ' · по ' + fmtDate(t.as_of), body);
+  drawChart(labels, [{ label: conf.title, data: conf.data, color: conf.color }], null);
+}
+
 function renderAll() {
   document.getElementById('status-msg').style.display = 'none';
   document.getElementById('content').style.display = 'block';
   const gen = App.data.generated_at ? new Date(App.data.generated_at) : null;
   document.getElementById('generated-at').textContent =
     'Обновлено: ' + (gen ? gen.toLocaleDateString('ru-RU') : '—');
+  renderTop();
   renderSummary();
+  let v = 'grid';
+  try { v = localStorage.getItem('mp_view') || 'grid'; } catch (e) {}
+  setView(v);
   renderCards();
 }
 
@@ -1014,8 +1305,25 @@ async function loadData() {
     'Не удалось загрузить данные (app_metrics.json).';
 }
 
-['search', 'sort', 'only-new'].forEach(id =>
-  document.addEventListener('input', e => { if (e.target.id === id) renderCards(); }));
+document.addEventListener('input', e => {
+  if (['search', 'sort', 'only-new'].includes(e.target.id)) renderCards();
+});
+
+// переключатель вида
+document.addEventListener('click', e => {
+  const vb = e.target.closest('.view-toggle button');
+  if (vb) { setView(vb.dataset.view); return; }
+  // клик по карточке метрики или верхней KPI
+  const top = e.target.closest('.kpi-stat');
+  if (top) { openTopModal(top.dataset.top); return; }
+  const card = e.target.closest('.card[data-key]');
+  if (card) { openMetricModal(card.dataset.key); return; }
+});
+
+// закрытие модалки
+document.getElementById('modal-close').addEventListener('click', closeModal);
+document.getElementById('modal').addEventListener('click', e => { if (e.target.id === 'modal') closeModal(); });
+document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
 
 // ───────── login ─────────
 function showApp() {
diff --git a/updater/update_app_metrics.py b/updater/update_app_metrics.py
index 4427ea6..e41fac1 100644
--- a/updater/update_app_metrics.py
+++ b/updater/update_app_metrics.py
@@ -145,6 +145,121 @@ order by t.report_period_id
 """.strip()
 
 
+# ─── Верхние KPI: регистрации / скачивания / MAU / DAU ───
+TOP_SQL = """
+with t as (
+select report_period_id, entry_date, sum(registered) over (order by entry_date) as registered_total, sum(ios_installs) over (order by entry_date) as ios_installs, sum(android_installs) over (order by entry_date) as android_installs,
+sum(ios_installs+android_installs) over (order by entry_date) as sum_installs
+from drb.drb_iliyas_telecomkz_daily_info
+)
+, t1 as (
+select period as report_period_id,
+	cast(date_add(DATE '1970-01-01', entry_date) as date) AS entry_date,
+	dau_wo_none_plat as dau, mau_wo_none_plat as mau
+	from drb.drb_iliyas_telecomkz_mau_stats
+	where cast(date_add(DATE '1970-01-01', entry_date) as date) < cast(now() as date)
+)
+select t.report_period_id, t.entry_date, t.registered_total, t.ios_installs, t.android_installs, t.sum_installs, t1.mau, t1.dau
+from t
+left join t1 on t.entry_date = t1.entry_date
+""".strip()
+
+TOP_TREND_MONTHS = 13  # сколько последних месяцев показывать в тренде верхних карточек
+
+
+def fetch_top(conn):
+    cur = conn.cursor()
+    log.info("Выполнение запроса верхних KPI...")
+    cur.execute(TOP_SQL)
+    rows = cur.fetchall()
+    names = [d[0].lower() for d in cur.description]
+    cur.close()
+    idx = {n: i for i, n in enumerate(names)}
+
+    def g(r, name):
+        v = r[idx[name]] if name in idx else None
+        return v
+
+    recs = []
+    for r in rows:
+        recs.append({
+            "rpid": int(g(r, "report_period_id")) if g(r, "report_period_id") is not None else None,
+            "date": str(g(r, "entry_date")),
+            "registered_total": g(r, "registered_total"),
+            "ios_installs": g(r, "ios_installs"),
+            "android_installs": g(r, "android_installs"),
+            "sum_installs": g(r, "sum_installs"),
+            "mau": g(r, "mau"),
+            "dau": g(r, "dau"),
+        })
+    recs.sort(key=lambda x: x["date"])
+    log.info("Верхние KPI: дней %d, по %s", len(recs), recs[-1]["date"] if recs else "—")
+    return recs
+
+
+def build_top(recs):
+    if not recs:
+        return None
+    last = recs[-1]
+
+    def last_nonnull(field):
+        for r in reversed(recs):
+            if r[field] is not None:
+                return int(r[field]), r["date"]
+        return 0, last["date"]
+
+    mau_v, _ = last_nonnull("mau")
+    dau_v, _ = last_nonnull("dau")
+
+    # помесячная агрегация: month-end для кумулятивных, среднее для активности
+    months = {}  # rpid -> aggregate
+    for r in recs:
+        m = months.setdefault(r["rpid"], {
+            "last_date": "", "registered_total": 0, "sum_installs": 0,
+            "mau_sum": 0, "mau_cnt": 0, "dau_sum": 0, "dau_cnt": 0,
+        })
+        if r["date"] >= m["last_date"]:
+            m["last_date"] = r["date"]
+            if r["registered_total"] is not None:
+                m["registered_total"] = int(r["registered_total"])
+            if r["sum_installs"] is not None:
+                m["sum_installs"] = int(r["sum_installs"])
+        if r["mau"] is not None:
+            m["mau_sum"] += int(r["mau"]); m["mau_cnt"] += 1
+        if r["dau"] is not None:
+            m["dau_sum"] += int(r["dau"]); m["dau_cnt"] += 1
+
+    ordered = sorted(m for m in months if m is not None)
+    ordered = ordered[-TOP_TREND_MONTHS:]
+    labels, reg_s, inst_s, mau_s, dau_s = [], [], [], [], []
+    for rpid in ordered:
+        a = months[rpid]
+        y, mo = rpid // 100, rpid % 100
+        labels.append(f"{_MONTHS_RU_SHORT[mo]} {y % 100:02d}")
+        reg_s.append(a["registered_total"])
+        inst_s.append(a["sum_installs"])
+        mau_s.append(round(a["mau_sum"] / a["mau_cnt"]) if a["mau_cnt"] else 0)
+        dau_s.append(round(a["dau_sum"] / a["dau_cnt"]) if a["dau_cnt"] else 0)
+
+    def _i(v):
+        return int(v) if v is not None else 0
+
+    return {
+        "as_of": last["date"],
+        "registered_total": _i(last["registered_total"]),
+        "installs_total": _i(last["sum_installs"]),
+        "installs_ios": _i(last["ios_installs"]),
+        "installs_android": _i(last["android_installs"]),
+        "mau": mau_v,
+        "dau": dau_v,
+        "trend_labels": labels,
+        "registered_series": reg_s,
+        "installs_series": inst_s,
+        "mau_series": mau_s,
+        "dau_series": dau_s,
+    }
+
+
 def fetch_monthly(conn, sql):
     cur = conn.cursor()
     log.info("Выполнение запроса метрик МП (помесячно)...")
@@ -256,6 +371,7 @@ def main() -> int:
     conn = base.connect_impala(cfg)
     try:
         rows = fetch_monthly(conn, sql)
+        top = build_top(fetch_top(conn))
     finally:
         try:
             conn.close()
@@ -268,6 +384,7 @@ def main() -> int:
         return 1
 
     payload = build_payload(rows, b)
+    payload["top"] = top
     if write_if_changed(payload):
         base.git_commit_push(cfg, [OUT_REL],
                              f"data: update app metrics {dt.date.today():%Y-%m-%d}")