339 lines
17 KiB
HTML
339 lines
17 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>Свод финансовых отчётов дочерних компаний</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" id="sidebar">
|
||
<div class="kt-ai-brand-row">
|
||
<img src="design-system/brand/kt-ai-logo.png" alt="Казахтелеком" class="kt-ai-brand-logo">
|
||
<span class="kt-ai-brand-label">Свод отчётов</span>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="sm" id="btnNewReport">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#upload"></use></svg>
|
||
Загрузить отчёты
|
||
</button>
|
||
<nav class="kt-ai-sidebar-nav" id="sidebarNav">
|
||
<div class="kt-ai-nav-group">
|
||
<div class="nav-label">Работа</div>
|
||
<a class="kt-ai-nav-item" data-screen="upload" data-active="true">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#inbox"></use></svg>
|
||
<span>Загрузка отчётов</span>
|
||
<span class="count" id="navUploadCount">15</span>
|
||
</a>
|
||
<a class="kt-ai-nav-item" data-screen="summary">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#table"></use></svg>
|
||
<span>Сводная таблица</span>
|
||
<span class="count" id="navSummaryCount">60</span>
|
||
</a>
|
||
<a class="kt-ai-nav-item" data-screen="verify">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#check-circle"></use></svg>
|
||
<span>Проверка и утверждение</span>
|
||
</a>
|
||
<a class="kt-ai-nav-item" data-screen="dashboard">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#dashboard"></use></svg>
|
||
<span>Дашборд руководства</span>
|
||
</a>
|
||
</div>
|
||
<div class="kt-ai-nav-group">
|
||
<div class="nav-label">О решении</div>
|
||
<a class="kt-ai-nav-item" data-screen="about">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#book"></use></svg>
|
||
<span>О решении</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
<div class="kt-ai-sidebar-footer">
|
||
<span class="kt-ai-chip" data-tone="blue" data-ai="true">ИИ-агент Alem</span>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="kt-ai-main">
|
||
<header class="kt-ai-topbar" id="topbar">
|
||
<div class="kt-ai-topbar-left">
|
||
<span class="kt-ai-topbar-crumb" id="topbarCrumb">Загрузка отчётов</span>
|
||
<button class="kt-ai-btn kt-ai-btn--margin-bottom" id="btnToggleTheme" data-variant="ghost" style="margin-left: var(--kt-ai-space-4);">Тема</button>
|
||
</div>
|
||
<div class="kt-ai-topbar-actions" id="topbarActions"></div>
|
||
</header>
|
||
|
||
<!-- 1. Загрузка отчётов -->
|
||
<section class="kt-ai-screen" id="screen-upload">
|
||
<div class="kt-ai-kpi-strip" id="uploadKpi" data-cards="true"></div>
|
||
<div class="kt-ai-toolbar">
|
||
<div class="kt-ai-filterbar" id="uploadFilters">
|
||
<select class="kt-ai-select" id="uploadStatusFilter">
|
||
<option value="all">Все статусы</option>
|
||
<option value="waiting">Ожидает</option>
|
||
<option value="processing">Обработка</option>
|
||
<option value="done">Готово</option>
|
||
</select>
|
||
<input class="kt-ai-input" id="uploadSearch" type="search" placeholder="Поиск компании или файла">
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-btn" data-variant="ghost" id="btnDeleteAllWaiting">Удалить ожидающие</button>
|
||
<button class="kt-ai-btn" data-variant="primary" id="btnProcessAll">Запустить обработку</button>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-table-wrap" data-framed="true">
|
||
<table class="kt-ai-table" id="uploadTable">
|
||
<thead>
|
||
<tr>
|
||
<th>Компания</th>
|
||
<th>Файл</th>
|
||
<th>Дата отправки</th>
|
||
<th>Шаблон</th>
|
||
<th>Статус</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="uploadTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2. Сводная таблица -->
|
||
<section class="kt-ai-screen" id="screen-summary" hidden>
|
||
<div class="kt-ai-kpi-strip" id="summaryKpi" data-cards="true"></div>
|
||
<div class="kt-ai-toolbar">
|
||
<div class="kt-ai-filterbar" id="summaryFilters">
|
||
<select class="kt-ai-select" id="summaryCompanyFilter">
|
||
<option value="all">Все компании</option>
|
||
</select>
|
||
<select class="kt-ai-select" id="summaryStatusFilter">
|
||
<option value="all">Все статусы</option>
|
||
<option value="ai">Найдено ИИ</option>
|
||
<option value="ai-uncertain">Требует проверки</option>
|
||
<option value="manual">Ручной режим</option>
|
||
</select>
|
||
<input class="kt-ai-input" id="summarySearch" type="search" placeholder="Поиск показателя">
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-btn" data-variant="ghost" id="btnRerunAi">Пересчитать ИИ</button>
|
||
<button class="kt-ai-btn" data-variant="primary" id="btnSaveSummary">Сохранить изменения</button>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-summary-layout">
|
||
<div class="kt-ai-table-wrap" data-framed="true" id="summaryTableWrap">
|
||
<table class="kt-ai-table" id="summaryTable">
|
||
<thead>
|
||
<tr>
|
||
<th>Компания</th>
|
||
<th>Показатель</th>
|
||
<th class="num">Значение</th>
|
||
<th>Источник</th>
|
||
<th>Статус</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="summaryTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
<aside class="kt-ai-card kt-ai-ai-log" id="aiLogCard">
|
||
<div class="kt-ai-card-head">
|
||
<span class="kt-ai-chip" data-ai="true">Журнал ИИ</span>
|
||
<button class="kt-ai-btn" data-size="sm" id="btnClearAiLog">Очистить</button>
|
||
</div>
|
||
<div class="kt-ai-ai-log-list" id="aiLogList"></div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. Проверка и утверждение -->
|
||
<section class="kt-ai-screen" id="screen-verify" hidden>
|
||
<div class="kt-ai-kpi-strip" id="verifyKpi" data-cards="true"></div>
|
||
<div class="kt-ai-verify-layout">
|
||
<div>
|
||
<div class="kt-ai-card kt-ai-card-section">
|
||
<div class="kt-ai-card-head">
|
||
<h3 class="kt-ai-card-title">Финальная сводная таблица</h3>
|
||
<button class="kt-ai-btn" data-size="sm" id="btnDownloadExcel">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#download"></use></svg>
|
||
Скачать единый Excel
|
||
</button>
|
||
</div>
|
||
<div class="kt-ai-table-wrap" data-framed="true">
|
||
<table class="kt-ai-table" data-density="compact">
|
||
<thead>
|
||
<tr>
|
||
<th>Компания</th>
|
||
<th>Показатель</th>
|
||
<th class="num">Значение</th>
|
||
<th>Статус проверки</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="verifyTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="kt-ai-card">
|
||
<div class="kt-ai-card-head">
|
||
<h3 class="kt-ai-card-title">Выборочная сверка</h3>
|
||
<span class="kt-ai-chip" id="verifyRecheckChip" data-tone="blue">Сверено 0</span>
|
||
</div>
|
||
<p class="kt-ai-card-sub">Сравните значения, введённые вручную, с итоговой таблицей.</p>
|
||
<div class="kt-ai-field">
|
||
<label>Компания</label>
|
||
<select class="kt-ai-select" id="recheckCompanySelect"></select>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Показатель</label>
|
||
<select class="kt-ai-select" id="recheckMetricSelect"></select>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Значение по ручному вводу</label>
|
||
<input class="kt-ai-input" id="recheckManualValue" type="number" step="0.01" placeholder="Введите значение">
|
||
</div>
|
||
<button class="kt-ai-btn kt-ai-btn--margin-bottom" id="btnDoRecheck">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#compare"></use></svg>
|
||
Провести сверку
|
||
</button>
|
||
<div class="kt-ai-recheck-result" id="recheckResult" hidden>
|
||
<span class="kt-ai-recheck-diff" id="recheckDiff"></span>
|
||
<span class="kt-ai-recheck-status" id="recheckStatus"></span>
|
||
</div>
|
||
<div class="kt-ai-drawer-actions" style="flex-wrap: wrap;">
|
||
<button class="kt-ai-btn" data-variant="ghost" id="btnBackToSummary">Вернуться к редактированию</button>
|
||
<button class="kt-ai-btn" data-size="sm" id="btnSendBack">Отправить на доработку</button>
|
||
<button class="kt-ai-btn" data-variant="primary" id="btnConfirmFinal">Подтвердить итоговую таблицу</button>
|
||
</div>
|
||
<div class="kt-ai-recheck-log" id="recheckLog"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. Дашборд руководства -->
|
||
<section class="kt-ai-screen" id="screen-dashboard" hidden>
|
||
<div class="kt-ai-kpi-strip" id="dashKpi" data-cards="true"></div>
|
||
<div class="kt-ai-dash-layout">
|
||
<div class="kt-ai-card">
|
||
<div class="kt-ai-card-head">
|
||
<h3 class="kt-ai-card-title">Показатели по компаниям</h3>
|
||
<select class="kt-ai-select" id="dashChartMetric">
|
||
<option value="revenue">Выручка</option>
|
||
<option value="profit">Прибыль</option>
|
||
<option value="expenses">Расходы</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-chart" id="dashChart"></div>
|
||
</div>
|
||
<div class="kt-ai-card kt-ai-chat-card">
|
||
<div class="kt-ai-card-head">
|
||
<span class="kt-ai-chip" data-ai="true">Чат-бот</span>
|
||
<span class="kt-ai-topbar-spacer"></span>
|
||
<span class="kt-ai-chip" id="chatStatusChip" data-tone="muted">Готов</span>
|
||
</div>
|
||
<div class="kt-ai-chat-log" id="chatLog">
|
||
<div class="kt-ai-chat-msg kt-ai-chat-bot">
|
||
Здравствуйте! Спросите меня про показатели, компании или статус обработки.
|
||
</div>
|
||
</div>
|
||
<form class="kt-ai-chat-input" id="chatForm">
|
||
<input class="kt-ai-input" id="chatInput" type="text" placeholder="Ваш вопрос" autocomplete="off">
|
||
<button class="kt-ai-btn" data-variant="primary" type="submit">
|
||
<svg class="kt-icon" aria-hidden="true"><use href="#send"></use></svg>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. О решении -->
|
||
<section class="kt-ai-screen" id="screen-about" hidden>
|
||
<div class="kt-ai-about">
|
||
<div class="kt-ai-card">
|
||
<div class="kt-ai-card-head">
|
||
<h3 class="kt-ai-card-title">Паспорт ИИ-решения</h3>
|
||
</div>
|
||
<div class="kt-ai-about-grid">
|
||
<div class="about-field"><label>Наименование</label><span>Свод финансовых отчётов дочерних компаний</span></div>
|
||
<div class="about-field"><label>Исполнитель</label><span>владелец процесса – сборка на платформе Vibe AI</span></div>
|
||
<div class="about-field"><label>Пользователи</label><span>Сводящий, Руководство</span></div>
|
||
<div class="about-field"><label>Дата внедрения</label><span>—</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-card">
|
||
<div class="kt-ai-card-head">
|
||
<h3 class="kt-ai-card-title">Предпосылки</h3>
|
||
</div>
|
||
<ul class="kt-ai-about-list">
|
||
<li>15 дочерних компаний ежемесячно отправляют отчёты по почте.</li>
|
||
<li>Главная компания должна получать и обрабатывать эти отчёты.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="kt-ai-card">
|
||
<div class="kt-ai-card-head">
|
||
<h3 class="kt-ai-card-title">Входные данные и источники</h3>
|
||
</div>
|
||
<ul class="kt-ai-about-list">
|
||
<li>Финансовые отчёты и показатели компаний в формате Excel.</li>
|
||
<li>Разные шаблоны и терминология показателей у 15 компаний.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="kt-ai-card">
|
||
<div class="kt-ai-card-head">
|
||
<h3 class="kt-ai-card-title">Процессы для внедрения ИИ</h3>
|
||
</div>
|
||
<ul class="kt-ai-about-list">
|
||
<li>Поиск соответствующих показателей в файлах с разными шаблонами.</li>
|
||
<li>Сбор данных в единую сводную таблицу.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="kt-ai-card">
|
||
<div class="kt-ai-card-head">
|
||
<h3 class="kt-ai-card-title">Ожидаемый эффект</h3>
|
||
</div>
|
||
<ul class="kt-ai-about-list">
|
||
<li>Сокращение времени на сведение отчётов.</li>
|
||
<li>Устранение ручных ошибок.</li>
|
||
<li>Ускорение принятия решений руководством.</li>
|
||
<li>Сокращение времени на 4 часа в месяц (оценка Тōре).</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="kt-ai-card">
|
||
<div class="kt-ai-card-head">
|
||
<h3 class="kt-ai-card-title">Контроль и риски</h3>
|
||
</div>
|
||
<ul class="kt-ai-about-list">
|
||
<li>Проверку итоговой таблицы проводит сводящий.</li>
|
||
<li>Сверка проводится выборочно с данными, вводимыми вручную.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="kt-ai-card">
|
||
<div class="kt-ai-card-head">
|
||
<h3 class="kt-ai-card-title">Меры по снижению рисков</h3>
|
||
</div>
|
||
<ul class="kt-ai-about-list">
|
||
<li>Проверка результата человеком перед использованием.</li>
|
||
<li>Журнал действий ИИ и возможность вернуть ручной режим.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<div class="kt-ai-toast-stack" id="toastStack"></div>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js" defer></script>
|
||
<script src="script.js" defer></script>
|
||
</body>
|
||
</html>
|