224 lines
12 KiB
HTML
224 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<!-- no-design-system: это приложение (учётная система), а не лендинг; используем app-shell из kt-ai-components.css -->
|
||
<html lang="ru" data-theme="auto">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Реестр приказов АО</title>
|
||
<link rel="icon" href="design-system/brand/kt-ai-logo.png">
|
||
<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">
|
||
<style>
|
||
@layer product {
|
||
.kpi-strip { display: flex; gap: var(--kt-ai-space-4); padding: var(--kt-ai-space-4) var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-border); background: var(--kt-ai-bg-soft); }
|
||
.kpi-card { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-4); min-width: 140px; }
|
||
.kpi-value { font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-bold); color: var(--kt-ai-fg); }
|
||
.kpi-label { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-1); }
|
||
.toolbar { padding: var(--kt-ai-space-4) var(--kt-ai-space-5); display: flex; gap: var(--kt-ai-space-3); align-items: center; flex-wrap: wrap; }
|
||
.search-input { width: 280px; }
|
||
.filter-chip { padding: var(--kt-ai-space-1) var(--kt-ai-space-3); border-radius: var(--kt-ai-radius-full); font-size: var(--kt-ai-text-sm); border: 1px solid var(--kt-ai-border); background: var(--kt-ai-bg); cursor: pointer; }
|
||
.filter-chip.is-active { background: var(--kt-ai-primary); color: white; border-color: var(--kt-ai-primary); }
|
||
.table-wrap { padding: 0 var(--kt-ai-space-5); overflow: auto; max-height: calc(100vh - 220px); }
|
||
.status-pill { display: inline-block; padding: var(--kt-ai-space-1) var(--kt-ai-space-2); border-radius: var(--kt-ai-radius-full); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-medium); }
|
||
.status-active { background: var(--kt-ai-status-ok-bg); color: var(--kt-ai-status-ok-fg); }
|
||
.status-expired { background: var(--kt-ai-status-risk-bg); color: var(--kt-ai-status-risk-fg); }
|
||
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; display: none; }
|
||
.drawer-overlay.open { display: block; }
|
||
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 480px; background: var(--kt-ai-bg); border-left: 1px solid var(--kt-ai-border); z-index: 101; transform: translateX(100%); transition: transform 0.3s ease; }
|
||
.drawer.open { transform: translateX(0); }
|
||
.drawer-header { padding: var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-border); display: flex; justify-content: space-between; align-items: flex-start; }
|
||
.drawer-title { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); }
|
||
.drawer-meta { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-1); }
|
||
.drawer-content { padding: var(--kt-ai-space-5); overflow-y: auto; max-height: calc(100vh - 80px); }
|
||
.drawer-actions { padding: var(--kt-ai-space-4) var(--kt-ai-space-5); border-top: 1px solid var(--kt-ai-border); display: flex; gap: var(--kt-ai-space-3); justify-content: flex-end; }
|
||
.detail-row { margin-bottom: var(--kt-ai-space-4); }
|
||
.detail-label { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--kt-ai-space-1); }
|
||
.detail-value { font-size: var(--kt-ai-text-sm); line-height: 1.6; }
|
||
.btn-icon { background: none; border: none; cursor: pointer; padding: var(--kt-ai-space-1); border-radius: var(--kt-ai-radius-md); color: var(--kt-ai-fg-muted); }
|
||
.btn-icon:hover { background: var(--kt-ai-bg-soft); color: var(--kt-ai-fg); }
|
||
.stats-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--kt-ai-bg); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl); padding: var(--kt-ai-space-6); z-index: 200; width: 90%; max-width: 900px; max-height: 90vh; overflow: auto; display: none; }
|
||
.stats-modal.open { display: block; }
|
||
.stats-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--kt-ai-space-5); }
|
||
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--kt-ai-space-5); }
|
||
.chart-card { background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-4); }
|
||
.chart-title { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); margin-bottom: var(--kt-ai-space-3); color: var(--kt-ai-fg-muted); }
|
||
.type-badge { display: inline-block; padding: 2px 8px; border-radius: var(--kt-ai-radius-md); font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-semibold); text-transform: uppercase; }
|
||
.type-prikaz { background: var(--kt-ai-info-bg); color: var(--kt-ai-info-fg); }
|
||
.type-rasp { background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary); }
|
||
.type-utv { background: var(--kt-ai-status-ok-bg); color: var(--kt-ai-status-ok-fg); }
|
||
.type-resh { background: var(--kt-ai-status-warn-bg); color: var(--kt-ai-status-warn-fg); }
|
||
.user-menu { display: flex; align-items: center; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-2) var(--kt-ai-space-3); background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-lg); }
|
||
.user-name { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); }
|
||
.user-role { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
|
||
<div id="app" style="display:none">
|
||
<div class="kt-ai-shell">
|
||
<aside class="kt-ai-sidebar">
|
||
<div class="sb-top">
|
||
<img src="design-system/brand/kt-ai-logo.png" alt="KT AI" style="width:22px;height:22px;border-radius:var(--kt-ai-radius-md)">
|
||
<span class="nm">Реестр приказов АО</span>
|
||
</div>
|
||
<button class="kt-ai-btn sb-new" data-variant="primary" id="addBtnSidebar">
|
||
<svg class="kt-icon"><use href="#plus"></use></svg>
|
||
<span>Новый документ</span>
|
||
</button>
|
||
<nav>
|
||
<div class="kt-ai-nav-group">
|
||
<div class="nav-label">Навигация</div>
|
||
<a class="kt-ai-nav-item is-active" href="#" data-view="all">
|
||
<svg class="kt-icon"><use href="#file"></use></svg>
|
||
<span>Все приказы</span>
|
||
</a>
|
||
<a class="kt-ai-nav-item" href="#" id="openStats">
|
||
<svg class="kt-icon"><use href="#chart"></use></svg>
|
||
<span>Статистика</span>
|
||
</a>
|
||
</div>
|
||
<div class="kt-ai-nav-group">
|
||
<div class="nav-label">Филиалы</div>
|
||
<a class="kt-ai-nav-item" href="#" data-branch="all"><svg class="kt-icon"><use href="#building"></use></svg><span>Все филиалы</span></a>
|
||
<a class="kt-ai-nav-item" href="#" data-branch="ЦА"><span>ЦА</span></a>
|
||
<a class="kt-ai-nav-item" href="#" data-branch="Алматы"><span>Алматы</span></a>
|
||
<a class="kt-ai-nav-item" href="#" data-branch="Астана"><span>Астана</span></a>
|
||
<a class="kt-ai-nav-item" href="#" data-branch="Шымкент"><span>Шымкент</span></a>
|
||
<a class="kt-ai-nav-item" href="#" data-branch="Караганда"><span>Караганда</span></a>
|
||
</div>
|
||
</nav>
|
||
<div class="kt-ai-nav-group" style="margin-top:auto">
|
||
<div class="user-menu">
|
||
<svg class="kt-icon"><use href="#user"></use></svg>
|
||
<div>
|
||
<div class="user-name" id="userName">Пользователь</div>
|
||
<div class="user-role" id="userRole">Роль</div>
|
||
</div>
|
||
<button class="btn-icon" id="logoutBtn" style="margin-left:auto" title="Выйти">
|
||
<svg class="kt-icon"><use href="#logout"></use></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="kt-ai-main">
|
||
<header class="kt-ai-topbar">
|
||
<div class="topbar-title">
|
||
<span class="t">Реестр приказов и распоряжений</span>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-btn" data-variant="primary" id="addBtn">
|
||
<svg class="kt-icon"><use href="#plus"></use></svg>
|
||
<span>Новый документ</span>
|
||
</button>
|
||
</header>
|
||
|
||
<div class="kpi-strip">
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-total">0</div>
|
||
<div class="kpi-label">Всего документов</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-active">0</div>
|
||
<div class="kpi-label">Действует</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-month">0</div>
|
||
<div class="kpi-label">За месяц</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-value" id="kpi-branches">0</div>
|
||
<div class="kpi-label">Филиалов</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toolbar">
|
||
<input class="kt-ai-input search-input" id="searchInput" placeholder="Поиск по номеру, названию...">
|
||
<div style="display:flex;gap:8px;align-items:center">
|
||
<span style="font-size:var(--kt-ai-text-sm);color:var(--kt-ai-fg-muted)">Тип:</span>
|
||
<button class="filter-chip is-active" data-type="all">Все</button>
|
||
<button class="filter-chip" data-type="Приказ">Приказы</button>
|
||
<button class="filter-chip" data-type="Распоряжение">Распоряжения</button>
|
||
<button class="filter-chip" data-type="Утверждение">Утверждения</button>
|
||
<button class="filter-chip" data-type="Решение правления">Решения ПР</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-wrap">
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Тип</th>
|
||
<th>Номер</th>
|
||
<th>Дата</th>
|
||
<th>Наименование</th>
|
||
<th>Филиал</th>
|
||
<th>Статус</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="ordersBody"></tbody>
|
||
</table>
|
||
<div class="kt-ai-empty" id="emptyState" style="display:none;padding:var(--kt-ai-space-12)">
|
||
<svg class="kt-icon" style="width:48px;height:48px;margin-bottom:16px"><use href="#file"></use></svg>
|
||
<p>Документы не найдены</p>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<div class="drawer-overlay" id="drawerOverlay"></div>
|
||
<aside class="drawer" id="drawer">
|
||
<div class="drawer-header">
|
||
<div>
|
||
<div class="drawer-title" id="drawerTitle">Заголовок</div>
|
||
<div class="drawer-meta" id="drawerMeta">Номер • Дата</div>
|
||
</div>
|
||
<button class="btn-icon" id="closeDrawer">
|
||
<svg class="kt-icon"><use href="#x"></use></svg>
|
||
</button>
|
||
</div>
|
||
<div class="drawer-content" id="drawerContent"></div>
|
||
<div class="drawer-actions">
|
||
<button class="kt-ai-btn" data-variant="ghost" id="editBtn">Изменить</button>
|
||
<button class="kt-ai-btn" data-variant="danger" id="deleteBtn">Удалить</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="stats-modal" id="statsModal">
|
||
<div class="stats-header">
|
||
<h2 style="margin:0;font-size:var(--kt-ai-text-xl)">Статистика приказов</h2>
|
||
<button class="btn-icon" id="closeStats">
|
||
<svg class="kt-icon"><use href="#x"></use></svg>
|
||
</button>
|
||
</div>
|
||
<div class="stats-grid">
|
||
<div class="chart-card">
|
||
<div class="chart-title">По типам документов</div>
|
||
<canvas id="chartTypes"></canvas>
|
||
</div>
|
||
<div class="chart-card">
|
||
<div class="chart-title">По филиалам</div>
|
||
<canvas id="chartBranches"></canvas>
|
||
</div>
|
||
<div class="chart-card">
|
||
<div class="chart-title">По месяцам</div>
|
||
<canvas id="chartMonths"></canvas>
|
||
</div>
|
||
<div class="chart-card">
|
||
<div class="chart-title">По статусам</div>
|
||
<canvas id="chartStatus"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="script.js"></script>
|
||
|
||
</body>
|
||
</html>
|