413 lines
24 KiB
HTML
413 lines
24 KiB
HTML
<!-- no-design-system: это приложение-панель, а не лендинг; используются только токены KT AI -->
|
||
<!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="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📄</text></svg>">
|
||
<style>
|
||
html, body { height: 100%; margin: 0; }
|
||
body { display: flex; flex-direction: column; }
|
||
.kt-ai-app { display: flex; flex: 1; overflow: hidden; }
|
||
.kt-ai-sidebar { width: 240px; background: var(--kt-ai-bg-soft); border-right: 1px solid var(--kt-ai-border); padding: var(--kt-ai-space-4); display: flex; flex-direction: column; gap: var(--kt-ai-space-2); flex-shrink: 0; }
|
||
.kt-ai-main { flex: 1; overflow: auto; padding: var(--kt-ai-space-6); }
|
||
.kt-ai-topbar { height: 56px; border-bottom: 1px solid var(--kt-ai-border); display: flex; align-items: center; padding: 0 var(--kt-ai-space-6); background: var(--kt-ai-bg); position: sticky; top: 0; z-index: 10; }
|
||
.kt-ai-nav-item { padding: var(--kt-ai-space-2) var(--kt-ai-space-3); border-radius: var(--kt-ai-radius-md); cursor: pointer; color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); }
|
||
.kt-ai-nav-item:hover { background: var(--kt-ai-card-bg); }
|
||
.kt-ai-nav-item.active { background: var(--kt-ai-primary); color: white; }
|
||
.kt-ai-logo { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); margin-bottom: var(--kt-ai-space-4); }
|
||
.kt-ai-user { margin-top: auto; padding: var(--kt-ai-space-3); border-top: 1px solid var(--kt-ai-border); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); }
|
||
.screen { display: none; }
|
||
.screen.active { display: block; }
|
||
.kt-ai-h1 { font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); margin: 0 0 var(--kt-ai-space-1) 0; }
|
||
.kt-ai-h2 { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg); margin: 0 0 var(--kt-ai-space-3) 0; }
|
||
.kt-ai-h3 { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg); margin: 0 0 var(--kt-ai-space-3) 0; }
|
||
.kt-ai-meta { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); }
|
||
.kt-ai-metric { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl); padding: var(--kt-ai-space-4); display: flex; flex-direction: column; gap: var(--kt-ai-space-1); }
|
||
.kt-ai-metric-value { font-size: var(--kt-ai-text-3xl); font-weight: var(--kt-ai-weight-bold); color: var(--kt-ai-fg); }
|
||
.kt-ai-metric-label { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); }
|
||
.kt-ai-table-wrapper { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl); overflow: hidden; }
|
||
.kt-ai-table { width: 100%; border-collapse: collapse; }
|
||
.kt-ai-table th { text-align: left; padding: var(--kt-ai-space-3) var(--kt-ai-space-4); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg-muted); border-bottom: 1px solid var(--kt-ai-border); background: var(--kt-ai-bg-soft); }
|
||
.kt-ai-table td { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg); border-bottom: 1px solid var(--kt-ai-border); }
|
||
.kt-ai-table tr:last-child td { border-bottom: none; }
|
||
.kt-ai-table tr:hover { background: var(--kt-ai-bg-soft); cursor: pointer; }
|
||
.kt-ai-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--kt-ai-radius-full); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-medium); }
|
||
.kt-ai-status-pill[data-status="new"] { background: var(--kt-ai-bg-info); color: var(--kt-ai-fg-info); }
|
||
.kt-ai-status-pill[data-status="ai-review"] { background: var(--kt-ai-bg-warning); color: var(--kt-ai-fg-warning); }
|
||
.kt-ai-status-pill[data-status="lawyer-check"] { background: var(--kt-ai-bg-purple); color: var(--kt-ai-fg-purple); }
|
||
.kt-ai-status-pill[data-status="approved"] { background: var(--kt-ai-bg-success); color: var(--kt-ai-fg-success); }
|
||
.kt-ai-status-pill[data-status="revision"] { background: var(--kt-ai-bg-error); color: var(--kt-ai-fg-error); }
|
||
.kt-ai-risk-flag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--kt-ai-radius-md); font-size: var(--kt-ai-text-xs); }
|
||
.kt-ai-risk-flag.low { background: var(--kt-ai-bg-warning); color: var(--kt-ai-fg-warning); }
|
||
.kt-ai-risk-flag.medium { background: var(--kt-ai-bg-orange); color: var(--kt-ai-fg-orange); }
|
||
.kt-ai-risk-flag.high { background: var(--kt-ai-bg-error); color: var(--kt-ai-fg-error); }
|
||
.kt-ai-card { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl); padding: var(--kt-ai-space-5); }
|
||
.kt-ai-row { display: flex; gap: var(--kt-ai-space-4); align-items: center; }
|
||
.kt-ai-divider { height: 1px; background: var(--kt-ai-border); margin: var(--kt-ai-space-4) 0; }
|
||
.kt-ai-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--kt-ai-space-4); }
|
||
.kt-ai-detail-item { display: flex; flex-direction: column; gap: 4px; }
|
||
.kt-ai-detail-label { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.kt-ai-detail-value { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); }
|
||
.kt-ai-diff { font-family: monospace; font-size: var(--kt-ai-text-xs); background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-md); padding: var(--kt-ai-space-3); max-height: 300px; overflow: auto; }
|
||
.kt-ai-diff .line { padding: 2px 0; }
|
||
.kt-ai-diff .line[data-op="add"] { background: var(--kt-ai-bg-success); color: var(--kt-ai-fg-success); }
|
||
.kt-ai-diff .line[data-op="del"] { background: var(--kt-ai-bg-error); color: var(--kt-ai-fg-error); }
|
||
.kt-ai-banner { padding: var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-xl); display: flex; gap: var(--kt-ai-space-3); align-items: flex-start; }
|
||
.kt-ai-banner[data-tone="risk"] { background: var(--kt-ai-bg-error); border: 1px solid var(--kt-ai-border-error); color: var(--kt-ai-fg-error); }
|
||
.kt-ai-banner[data-tone="info"] { background: var(--kt-ai-bg-info); border: 1px solid var(--kt-ai-border-info); color: var(--kt-ai-fg-info); }
|
||
.kt-ai-empty { text-align: center; padding: var(--kt-ai-space-10); color: var(--kt-ai-fg-muted); }
|
||
.kt-ai-skeleton { background: linear-gradient(90deg, var(--kt-ai-bg-soft) 25%, var(--kt-ai-border) 50%, var(--kt-ai-bg-soft) 75%); background-size: 200% 100%; animation: skeleton 1.5s infinite; border-radius: var(--kt-ai-radius-md); }
|
||
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||
.ai-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--kt-ai-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 4px 12px var(--kt-ai-shadow); cursor: pointer; border: none; }
|
||
.kt-ai-filterbar { display: flex; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border-bottom: 1px solid var(--kt-ai-border); background: var(--kt-ai-bg-soft); }
|
||
.kt-ai-filter-chip { padding: 4px 12px; border-radius: var(--kt-ai-radius-full); font-size: var(--kt-ai-text-xs); background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-border); cursor: pointer; color: var(--kt-ai-fg-muted); }
|
||
.kt-ai-filter-chip.active { background: var(--kt-ai-primary); color: white; border-color: var(--kt-ai-primary); }
|
||
.kt-ai-source-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--kt-ai-radius-md); font-size: var(--kt-ai-text-xs); background: var(--kt-ai-bg-soft); color: var(--kt-ai-fg-muted); border: 1px solid var(--kt-ai-border); }
|
||
.kt-ai-actions { display: flex; gap: var(--kt-ai-space-2); }
|
||
.hidden { display: none !important; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="kt-ai-app">
|
||
<aside class="kt-ai-sidebar">
|
||
<div class="kt-ai-logo">📄 Договоры аренды</div>
|
||
<nav>
|
||
<div class="kt-ai-nav-item active" data-screen="queue">Очередь</div>
|
||
<div class="kt-ai-nav-item" data-screen="problems">Проблемные</div>
|
||
<div class="kt-ai-nav-item" data-screen="registry">Реестр</div>
|
||
<div class="kt-ai-nav-item" data-screen="new">Новая заявка</div>
|
||
</nav>
|
||
<div class="kt-ai-user">
|
||
<div style="font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg);">Юрист ОЦО</div>
|
||
<div>Служба правового обеспечения</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="kt-ai-main">
|
||
<header class="kt-ai-topbar">
|
||
<div>
|
||
<h1 class="kt-ai-h1" id="page-title">Очередь договоров</h1>
|
||
<p class="kt-ai-meta" id="page-subtitle">Проверка и согласование договоров аренды</p>
|
||
</div>
|
||
<span style="flex: 1;"></span>
|
||
<button class="kt-ai-btn" data-variant="ghost" id="theme-toggle">🌙</button>
|
||
</header>
|
||
|
||
<!-- ЭКРАН 1: ОЧЕРЕДЬ -->
|
||
<div id="screen-queue" class="screen active">
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-5);">
|
||
<div class="kt-ai-metric">
|
||
<div class="kt-ai-metric-value" id="metric-total">0</div>
|
||
<div class="kt-ai-metric-label">Всего заявок</div>
|
||
</div>
|
||
<div class="kt-ai-metric">
|
||
<div class="kt-ai-metric-value" id="metric-pending">0</div>
|
||
<div class="kt-ai-metric-label">Требуют проверки</div>
|
||
</div>
|
||
<div class="kt-ai-metric">
|
||
<div class="kt-ai-metric-value" id="metric-risks">0</div>
|
||
<div class="kt-ai-metric-label">С риск-флагами</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="banner-risk" class="kt-ai-banner hidden" data-tone="risk">
|
||
<span style="font-size: 20px;">⚠️</span>
|
||
<div>
|
||
<strong><span id="risk-count">0</span> договоров с высокими рисками</strong>
|
||
<div style="font-size: var(--kt-ai-text-sm); margin-top: 4px;">Требуют приоритетной проверки юристом</div>
|
||
</div>
|
||
<span style="flex: 1;"></span>
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="filterByStatus('ai-review')">Открыть</button>
|
||
</div>
|
||
|
||
<div class="kt-ai-table-wrapper" style="margin-top: var(--kt-ai-space-4);">
|
||
<div class="kt-ai-filterbar">
|
||
<input class="kt-ai-input" placeholder="Поиск по номеру, контрагенту, филиалу" id="search-input" style="max-width: 320px;">
|
||
<span style="flex: 1;"></span>
|
||
<div class="kt-ai-filter-chip active" data-filter="all">Все</div>
|
||
<div class="kt-ai-filter-chip" data-filter="new">Новые</div>
|
||
<div class="kt-ai-filter-chip" data-filter="ai-review">ИИ проверка</div>
|
||
<div class="kt-ai-filter-chip" data-filter="lawyer-check">Проверка юриста</div>
|
||
<div class="kt-ai-filter-chip" data-filter="approved">Согласовано</div>
|
||
</div>
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Номер</th>
|
||
<th>Контрагент</th>
|
||
<th>Филиал</th>
|
||
<th>Сумма</th>
|
||
<th>Статус</th>
|
||
<th>Риски</th>
|
||
<th>Дата</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="queue-table-body">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ЭКРАН 2: ПРОБЛЕМНЫЕ -->
|
||
<div id="screen-problems" class="screen">
|
||
<div class="kt-ai-banner" data-tone="risk">
|
||
<span style="font-size: 20px;">⚠️</span>
|
||
<div>
|
||
<strong>Заявки с неполными данными</strong>
|
||
<div style="font-size: var(--kt-ai-text-sm); margin-top: 4px;">Требуют дозапроса у инициатора</div>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-table-wrapper" style="margin-top: var(--kt-ai-space-4);">
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Номер</th>
|
||
<th>Проблема</th>
|
||
<th>Филиал</th>
|
||
<th>Дата запроса</th>
|
||
<th>Действие</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="problems-table-body">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ЭКРАН 3: РЕЕСТР -->
|
||
<div id="screen-registry" class="screen">
|
||
<div class="kt-ai-row" style="margin-bottom: var(--kt-ai-space-4);">
|
||
<input class="kt-ai-input" placeholder="Поиск в реестре" style="max-width: 320px;">
|
||
<button class="kt-ai-btn" data-variant="ghost">📥 Экспорт Excel</button>
|
||
</div>
|
||
<div class="kt-ai-table-wrapper">
|
||
<table class="kt-ai-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Номер</th>
|
||
<th>Контрагент</th>
|
||
<th>Объект</th>
|
||
<th>Сумма</th>
|
||
<th>Статус</th>
|
||
<th>История</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="registry-table-body">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ЭКРАН 4: НОВАЯ ЗАЯВКА -->
|
||
<div id="screen-new" class="screen">
|
||
<div class="kt-ai-card" style="max-width: 720px;">
|
||
<h2 class="kt-ai-h2">Новая заявка на договор аренды</h2>
|
||
<p class="kt-ai-meta" style="margin-bottom: var(--kt-ai-space-4);">Заполните данные для подготовки проекта договора</p>
|
||
|
||
<form id="new-contract-form">
|
||
<div class="kt-ai-detail-grid">
|
||
<div class="kt-ai-field">
|
||
<label class="kt-ai-label">Филиал</label>
|
||
<select class="kt-ai-select" name="branch" required>
|
||
<option value="">Выберите филиал</option>
|
||
<option>Алматы</option>
|
||
<option>Астана</option>
|
||
<option>Шымкент</option>
|
||
<option>Караганда</option>
|
||
<option>Актобе</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label class="kt-ai-label">Инициатор</label>
|
||
<input class="kt-ai-input" name="initiator" placeholder="ФИО" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-field" style="margin-top: var(--kt-ai-space-3);">
|
||
<label class="kt-ai-label">Контрагент</label>
|
||
<input class="kt-ai-input" name="counterparty" placeholder="Название организации" required>
|
||
</div>
|
||
|
||
<div class="kt-ai-detail-grid" style="margin-top: var(--kt-ai-space-3);">
|
||
<div class="kt-ai-field">
|
||
<label class="kt-ai-label">БИН контрагента</label>
|
||
<input class="kt-ai-input" name="bin" placeholder="123456789012" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label class="kt-ai-label">Срок аренды (мес)</label>
|
||
<input class="kt-ai-input" name="term" type="number" placeholder="12" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-detail-grid" style="margin-top: var(--kt-ai-space-3);">
|
||
<div class="kt-ai-field">
|
||
<label class="kt-ai-label">Объект аренды</label>
|
||
<input class="kt-ai-input" name="object" placeholder="Например: Помещение офиса" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label class="kt-ai-label">Площадь (м²)</label>
|
||
<input class="kt-ai-input" name="area" type="number" placeholder="100" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-field" style="margin-top: var(--kt-ai-space-3);">
|
||
<label class="kt-ai-label">Кадастровый номер</label>
|
||
<input class="kt-ai-input" name="cadastral" placeholder="01:49:000000:123" required>
|
||
</div>
|
||
|
||
<div class="kt-ai-detail-grid" style="margin-top: var(--kt-ai-space-3);">
|
||
<div class="kt-ai-field">
|
||
<label class="kt-ai-label">Ставка в месяц (₸)</label>
|
||
<input class="kt-ai-input" name="rate" type="number" placeholder="500000" required>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label class="kt-ai-label">Подписант от контрагента</label>
|
||
<input class="kt-ai-input" name="signer" placeholder="ФИО, должность" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-field" style="margin-top: var(--kt-ai-space-3);">
|
||
<label class="kt-ai-label">Комментарий</label>
|
||
<textarea class="kt-ai-textarea" name="comment" rows="3" placeholder="Дополнительная информация"></textarea>
|
||
</div>
|
||
|
||
<div class="kt-ai-actions" style="margin-top: var(--kt-ai-space-5);">
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary">Отправить заявку</button>
|
||
<button type="reset" class="kt-ai-btn" data-variant="ghost">Очистить</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ЭКРАН 5: КАРТОЧКА ДОГОВОРА -->
|
||
<div id="screen-contract" class="screen">
|
||
<div class="kt-ai-row" style="margin-bottom: var(--kt-ai-space-4);">
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="navigateTo('queue')">← Назад к очереди</button>
|
||
<span style="flex: 1;"></span>
|
||
<div class="kt-ai-actions">
|
||
<button class="kt-ai-btn" data-variant="ghost" id="btn-download">📥 Скачать Word</button>
|
||
<button class="kt-ai-btn" data-variant="primary" id="btn-approve">✓ Принять</button>
|
||
<button class="kt-ai-btn" data-variant="danger" id="btn-revision">↺ На доработку</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: grid; grid-template-columns: 1fr 380px; gap: var(--kt-ai-space-5);">
|
||
<div>
|
||
<div class="kt-ai-card" style="margin-bottom: var(--kt-ai-space-4);">
|
||
<div class="kt-ai-row" style="margin-bottom: var(--kt-ai-space-3);">
|
||
<h2 class="kt-ai-h2" id="contract-title">Договор №</h2>
|
||
<span class="kt-ai-status-pill" id="contract-status" data-status="new">Новый</span>
|
||
</div>
|
||
|
||
<div class="kt-ai-detail-grid">
|
||
<div class="kt-ai-detail-item">
|
||
<div class="kt-ai-detail-label">Контрагент</div>
|
||
<div class="kt-ai-detail-value" id="contract-counterparty">–</div>
|
||
</div>
|
||
<div class="kt-ai-detail-item">
|
||
<div class="kt-ai-detail-label">БИН</div>
|
||
<div class="kt-ai-detail-value" id="contract-bin">–</div>
|
||
</div>
|
||
<div class="kt-ai-detail-item">
|
||
<div class="kt-ai-detail-label">Филиал</div>
|
||
<div class="kt-ai-detail-value" id="contract-branch">–</div>
|
||
</div>
|
||
<div class="kt-ai-detail-item">
|
||
<div class="kt-ai-detail-label">Инициатор</div>
|
||
<div class="kt-ai-detail-value" id="contract-initiator">–</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-divider"></div>
|
||
|
||
<h3 class="kt-ai-h3" style="margin-bottom: var(--kt-ai-space-3);">Объект аренды</h3>
|
||
<div class="kt-ai-detail-grid">
|
||
<div class="kt-ai-detail-item">
|
||
<div class="kt-ai-detail-label">Наименование</div>
|
||
<div class="kt-ai-detail-value" id="contract-object">–</div>
|
||
</div>
|
||
<div class="kt-ai-detail-item">
|
||
<div class="kt-ai-detail-label">Площадь</div>
|
||
<div class="kt-ai-detail-value" id="contract-area">–</div>
|
||
</div>
|
||
<div class="kt-ai-detail-item">
|
||
<div class="kt-ai-detail-label">Кадастровый номер</div>
|
||
<div class="kt-ai-detail-value" id="contract-cadastral">–</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-divider"></div>
|
||
|
||
<h3 class="kt-ai-h3" style="margin-bottom: var(--kt-ai-space-3);">Финансовые условия</h3>
|
||
<div class="kt-ai-detail-grid">
|
||
<div class="kt-ai-detail-item">
|
||
<div class="kt-ai-detail-label">Ставка в месяц</div>
|
||
<div class="kt-ai-detail-value" id="contract-rate">–</div>
|
||
</div>
|
||
<div class="kt-ai-detail-item">
|
||
<div class="kt-ai-detail-label">Срок аренды</div>
|
||
<div class="kt-ai-detail-value" id="contract-term">–</div>
|
||
</div>
|
||
<div class="kt-ai-detail-item">
|
||
<div class="kt-ai-detail-label">Общая сумма</div>
|
||
<div class="kt-ai-detail-value" id="contract-total">–</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-card" id="diff-card" style="display: none;">
|
||
<div class="kt-ai-row" style="margin-bottom: var(--kt-ai-space-3);">
|
||
<h3 class="kt-ai-h3">Отклонения от шаблона</h3>
|
||
<span class="kt-ai-source-pill">📊 Контрагентская версия</span>
|
||
</div>
|
||
<div class="kt-ai-diff" id="diff-content"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="kt-ai-card" style="margin-bottom: var(--kt-ai-space-4);">
|
||
<div class="kt-ai-row" style="margin-bottom: var(--kt-ai-space-3);">
|
||
<h3 class="kt-ai-h3">Проверки ИИ</h3>
|
||
<span class="kt-ai-status-pill" data-status="ai-review">Авто</span>
|
||
</div>
|
||
<div id="ai-checks"></div>
|
||
</div>
|
||
|
||
<div class="kt-ai-card" id="tariff-card">
|
||
<div class="kt-ai-row" style="margin-bottom: var(--kt-ai-space-3);">
|
||
<h3 class="kt-ai-h3">Тариф из SAP</h3>
|
||
<span class="kt-ai-source-pill">🔗 SAP актуальный</span>
|
||
</div>
|
||
<div class="kt-ai-detail-item">
|
||
<div class="kt-ai-detail-label">Тариф на дату</div>
|
||
<div class="kt-ai-detail-value" id="sap-tariff-date">–</div>
|
||
</div>
|
||
<div class="kt-ai-detail-item" style="margin-top: var(--kt-ai-space-2);">
|
||
<div class="kt-ai-detail-label">Ставка по тарифу</div>
|
||
<div class="kt-ai-detail-value" id="sap-tariff-rate">–</div>
|
||
</div>
|
||
<div class="kt-ai-detail-item" style="margin-top: var(--kt-ai-space-2);">
|
||
<div class="kt-ai-detail-label">Расхождение с заявкой</div>
|
||
<div class="kt-ai-detail-value" id="sap-diff">–</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<button class="ai-fab" title="ИИ-помощник Töre">🤖</button>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|