278 lines
28 KiB
HTML
278 lines
28 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="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>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.kt-ai-app { display: flex; min-height: 100vh; background: var(--kt-ai-bg); }
|
||
.kt-ai-sidebar { width: 260px; background: var(--kt-ai-bg-soft); border-right: 1px solid var(--kt-ai-border); padding: var(--kt-ai-space-6); position: fixed; height: 100vh; overflow-y: auto; }
|
||
.kt-ai-main { margin-left: 260px; flex: 1; }
|
||
.kt-ai-topbar { background: var(--kt-ai-bg); border-bottom: 1px solid var(--kt-ai-border); padding: var(--kt-ai-space-4) var(--kt-ai-space-6); display: flex; align-items: center; gap: var(--kt-ai-space-4); position: sticky; top: 0; z-index: 10; }
|
||
.kt-ai-nav-item { display: flex; align-items: center; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-md); color: var(--kt-ai-fg); cursor: pointer; transition: background 0.2s; margin-bottom: var(--kt-ai-space-1); }
|
||
.kt-ai-nav-item:hover { background: var(--kt-ai-bg); }
|
||
.kt-ai-nav-item.active { background: var(--kt-ai-primary); color: white; }
|
||
.kt-ai-nav-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
|
||
.kt-ai-workspace { padding: var(--kt-ai-space-6); }
|
||
.kt-ai-screen { display: none; }
|
||
.kt-ai-screen.active { display: block; }
|
||
.kt-ai-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-6); }
|
||
.kt-ai-stat-card { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); border-radius: var(--kt-ai-radius-xl); padding: var(--kt-ai-space-5); }
|
||
.kt-ai-stat-value { font-size: var(--kt-ai-text-3xl); font-weight: var(--kt-ai-weight-bold); color: var(--kt-ai-fg); margin-bottom: var(--kt-ai-space-1); }
|
||
.kt-ai-stat-label { color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); }
|
||
.kt-ai-table-wrap { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-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-4) var(--kt-ai-space-5); background: var(--kt-ai-bg-soft); border-bottom: 1px solid var(--kt-ai-border); color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); }
|
||
.kt-ai-table td { padding: var(--kt-ai-space-4) var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-border); color: var(--kt-ai-fg); }
|
||
.kt-ai-table tr:hover { background: var(--kt-ai-bg-soft); }
|
||
.kt-ai-table tr:last-child td { border-bottom: none; }
|
||
.kt-ai-status-pill { display: inline-flex; align-items: center; 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-soft); color: var(--kt-ai-primary); border: 1px solid var(--kt-ai-border); }
|
||
.kt-ai-status-pill[data-status="ai-processing"] { background: var(--kt-ai-bg-soft); color: var(--kt-ai-fg); border: 1px solid var(--kt-ai-border); }
|
||
.kt-ai-status-pill[data-status="review"] { background: var(--kt-ai-bg-soft); color: var(--kt-ai-fg); border: 1px solid var(--kt-ai-border); }
|
||
.kt-ai-status-pill[data-status="approved"] { background: var(--kt-ai-bg-soft); color: var(--kt-ai-fg); border: 1px solid var(--kt-ai-border); }
|
||
.kt-ai-status-pill[data-status="returned"] { background: var(--kt-ai-bg-soft); color: var(--kt-ai-danger); border: 1px solid var(--kt-ai-border); }
|
||
.kt-ai-flag-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--kt-ai-bg-soft); color: var(--kt-ai-danger); border-radius: var(--kt-ai-radius-md); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-medium); border: 1px solid var(--kt-ai-border); }
|
||
.kt-ai-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--kt-ai-space-6); }
|
||
.kt-ai-detail-card { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); border-radius: var(--kt-ai-radius-xl); padding: var(--kt-ai-space-6); }
|
||
.kt-ai-field-group { margin-bottom: var(--kt-ai-space-5); }
|
||
.kt-ai-field-label { display: block; color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); margin-bottom: var(--kt-ai-space-2); }
|
||
.kt-ai-field-value { color: var(--kt-ai-fg); font-size: var(--kt-ai-text-base); }
|
||
.kt-ai-risk-banner { background: var(--kt-ai-bg-soft); border-left: 3px solid var(--kt-ai-danger); border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-4); }
|
||
.kt-ai-risk-title { color: var(--kt-ai-danger); font-weight: var(--kt-ai-weight-semibold); margin-bottom: var(--kt-ai-space-2); font-size: var(--kt-ai-text-sm); }
|
||
.kt-ai-risk-text { color: var(--kt-ai-fg); font-size: var(--kt-ai-text-sm); line-height: 1.5; }
|
||
.kt-ai-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-5); }
|
||
.kt-ai-compare-box { background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-4); }
|
||
.kt-ai-compare-label { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-2); }
|
||
.kt-ai-compare-value { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); }
|
||
.kt-ai-diff-add { background: var(--kt-ai-bg-soft); color: var(--kt-ai-fg); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--kt-ai-border); }
|
||
.kt-ai-actions-bar { display: flex; gap: var(--kt-ai-space-3); margin-top: var(--kt-ai-space-6); padding-top: var(--kt-ai-space-5); border-top: 1px solid var(--kt-ai-border); }
|
||
.kt-ai-search-bar { display: flex; gap: var(--kt-ai-space-3); margin-bottom: var(--kt-ai-space-5); flex-wrap: wrap; }
|
||
.kt-ai-input { flex: 1; min-width: 200px; padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-md); background: var(--kt-ai-bg); color: var(--kt-ai-fg); font-size: var(--kt-ai-text-sm); }
|
||
.kt-ai-filter-group { display: flex; gap: var(--kt-ai-space-2); flex-wrap: wrap; }
|
||
.kt-ai-filter-btn { padding: var(--kt-ai-space-2) var(--kt-ai-space-4); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-md); background: var(--kt-ai-bg); color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); cursor: pointer; }
|
||
.kt-ai-filter-btn.active { background: var(--kt-ai-primary); color: white; border-color: var(--kt-ai-primary); }
|
||
.kt-ai-alem-fab { position: fixed; bottom: var(--kt-ai-space-6); right: var(--kt-ai-space-6); width: 56px; height: 56px; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-primary); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1); font-size: var(--kt-ai-text-xl); }
|
||
.kt-ai-user-info { display: flex; align-items: center; gap: var(--kt-ai-space-3); margin-left: auto; }
|
||
.kt-ai-avatar { width: 32px; height: 32px; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); }
|
||
.kt-ai-meta { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.kt-ai-divider { height: 1px; background: var(--kt-ai-border); margin: var(--kt-ai-space-5) 0; }
|
||
.kt-ai-section-title { 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-history-item { padding: var(--kt-ai-space-4); border-left: 3px solid var(--kt-ai-primary); background: var(--kt-ai-bg-soft); border-radius: 0 var(--kt-ai-radius-md) var(--kt-ai-radius-md) 0; margin-bottom: var(--kt-ai-space-3); }
|
||
.kt-ai-history-date { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-1); }
|
||
.kt-ai-history-text { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg); }
|
||
.kt-ai-toast { position: fixed; bottom: var(--kt-ai-space-6); left: 50%; transform: translateX(-50%); background: var(--kt-ai-fg); color: var(--kt-ai-bg); padding: var(--kt-ai-space-3) var(--kt-ai-space-6); border-radius: var(--kt-ai-radius-lg); font-size: var(--kt-ai-text-sm); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 100; }
|
||
.kt-ai-toast.show { opacity: 1; }
|
||
.kt-ai-h2 { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); margin: 0; }
|
||
.kt-ai-contract-text { background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-4); font-family: monospace; font-size: var(--kt-ai-text-sm); line-height: 1.6; color: var(--kt-ai-fg-muted); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="kt-ai-app">
|
||
<aside class="kt-ai-sidebar">
|
||
<div style="font-weight: var(--kt-ai-weight-semibold); margin-bottom: var(--kt-ai-space-6); color: var(--kt-ai-fg);">📄 Договоры аренды</div>
|
||
<nav>
|
||
<div class="kt-ai-nav-item active" data-screen="queue">
|
||
<span class="kt-ai-nav-icon">📋</span><span>Очередь заявок</span>
|
||
</div>
|
||
<div class="kt-ai-nav-item" data-screen="registry">
|
||
<span class="kt-ai-nav-icon">🗂</span><span>Реестр договоров</span>
|
||
</div>
|
||
<div class="kt-ai-nav-item" data-screen="new">
|
||
<span class="kt-ai-nav-icon">➕</span><span>Новая заявка</span>
|
||
</div>
|
||
</nav>
|
||
<div style="margin-top: auto; padding-top: var(--kt-ai-space-6); border-top: 1px solid var(--kt-ai-border);">
|
||
<div class="kt-ai-meta" style="margin-bottom: var(--kt-ai-space-2);">Служба правового обеспечения</div>
|
||
<div class="kt-ai-meta">ОЦО ЮС · Дивизион по обеспечению бизнеса</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="kt-ai-main">
|
||
<div class="kt-ai-topbar">
|
||
<h2 class="kt-ai-h2">ИИ-агент «Договоры аренды»</h2>
|
||
<div class="kt-ai-user-info">
|
||
<span class="kt-ai-meta">Юрист ОЦО ЮС</span>
|
||
<div class="kt-ai-avatar">Ю</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-workspace">
|
||
|
||
<div id="screen-queue" class="kt-ai-screen active">
|
||
<div class="kt-ai-stat-grid">
|
||
<div class="kt-ai-stat-card"><div class="kt-ai-stat-value" id="stat-new">12</div><div class="kt-ai-stat-label">Новых заявок</div></div>
|
||
<div class="kt-ai-stat-card"><div class="kt-ai-stat-value" id="stat-processing">5</div><div class="kt-ai-stat-label">В обработке ИИ</div></div>
|
||
<div class="kt-ai-stat-card"><div class="kt-ai-stat-value" id="stat-review">8</div><div class="kt-ai-stat-label">Требуют проверки</div></div>
|
||
<div class="kt-ai-stat-card"><div class="kt-ai-stat-value" id="stat-week">24</div><div class="kt-ai-stat-label">Обработано за неделю</div></div>
|
||
</div>
|
||
|
||
<div class="kt-ai-search-bar">
|
||
<input type="text" class="kt-ai-input" placeholder="Поиск по контрагенту, номеру заявки..." id="search-input">
|
||
<div class="kt-ai-filter-group">
|
||
<button class="kt-ai-filter-btn active" data-filter="all">Все</button>
|
||
<button class="kt-ai-filter-btn" data-filter="new">Новые</button>
|
||
<button class="kt-ai-filter-btn" data-filter="review">На проверке</button>
|
||
<button class="kt-ai-filter-btn" data-filter="risk">С рисками</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-table-wrap">
|
||
<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>
|
||
|
||
<div id="screen-detail" class="kt-ai-screen">
|
||
<div style="margin-bottom: var(--kt-ai-space-5);"><a class="kt-ai-btn" data-variant="ghost" onclick="showScreen('queue')">← Назад к очереди</a></div>
|
||
<div class="kt-ai-detail-grid">
|
||
<div>
|
||
<div class="kt-ai-detail-card" style="margin-bottom: var(--kt-ai-space-5);">
|
||
<h2 class="kt-ai-section-title" id="detail-title">Заявка №4827</h2>
|
||
<div class="kt-ai-field-group"><span class="kt-ai-field-label">Контрагент</span><span class="kt-ai-field-value" id="detail-counterparty">ТОО «Алма-Ата Ритейл»</span></div>
|
||
<div class="kt-ai-comparison">
|
||
<div class="kt-ai-compare-box"><div class="kt-ai-compare-label">Тариф из заявки</div><div class="kt-ai-compare-value">850 ₸/м²</div></div>
|
||
<div class="kt-ai-compare-box"><div class="kt-ai-compare-label">Тариф из SAP (актуальный)</div><div class="kt-ai-compare-value">1 200 ₸/м² <span class="kt-ai-diff-add">+41%</span></div></div>
|
||
</div>
|
||
<div class="kt-ai-divider"></div>
|
||
<div class="kt-ai-field-group"><span class="kt-ai-field-label">Объект аренды</span><span class="kt-ai-field-value">Помещение свободного назначения, 125 м²</span></div>
|
||
<div class="kt-ai-field-group"><span class="kt-ai-field-label">Срок аренды</span><span class="kt-ai-field-value">11 месяцев</span></div>
|
||
<div class="kt-ai-field-group"><span class="kt-ai-field-label">Общая сумма</span><span class="kt-ai-field-value">1 350 000 ₸</span></div>
|
||
<div class="kt-ai-divider"></div>
|
||
<h3 class="kt-ai-section-title" style="margin-top: var(--kt-ai-space-5);">Риск-флаги</h3>
|
||
<div class="kt-ai-risk-banner"><div class="kt-ai-risk-title">⚠️ Тариф ниже актуального по SAP</div><div class="kt-ai-risk-text">Ст. 273 ГК РК: цена договора должна соответствовать рыночным условиям. Требуется обоснование скидки или применение актуального тарифа.</div></div>
|
||
<div class="kt-ai-risk-banner"><div class="kt-ai-risk-title">⚠️ Полномочия подписанта требуют проверки</div><div class="kt-ai-risk-text">Доверенность №345 от 15.03.2024: требуется проверка в реестре доверенностей КТ.</div></div>
|
||
</div>
|
||
<div class="kt-ai-detail-card">
|
||
<h3 class="kt-ai-section-title">Проект договора</h3>
|
||
<p class="kt-ai-meta" style="margin-bottom: var(--kt-ai-space-4);">Сгенерирован ИИ-агентом на основе шаблона ОЦО ЮС</p>
|
||
<div class="kt-ai-contract-text">ДОГОВОР АРЕНДЫ №<span id="detail-contract-num">4827-ДА</span><br>г. Алматы<br><br><span style="border: 1px solid var(--kt-ai-border); padding: 2px 6px; border-radius: 4px;">850</span> <span style="color: var(--kt-ai-fg-muted);">→</span> <span class="kt-ai-diff-add">1 200</span> тенге за 1 м² в месяц<br>Общая площадь: 125 м²<br>Срок аренды: 11 месяцев<br><br>[Полный текст договора сгенерирован по шаблону...]</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="kt-ai-detail-card" style="margin-bottom: var(--kt-ai-space-5);">
|
||
<h3 class="kt-ai-section-title">Действия</h3>
|
||
<div class="kt-ai-actions-bar" style="margin-top: 0; padding-top: 0; border-top: none; flex-direction: column;">
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" onclick="approveContract()" style="width: 100%;">✓ Подтвердить договор</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="returnForRevision()" style="width: 100%;">↩ Вернуть на доработку</button>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="askAlem()" style="width: 100%;">💬 Спросить Alem</button>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-detail-card">
|
||
<h3 class="kt-ai-section-title">История</h3>
|
||
<div class="kt-ai-history-item"><div class="kt-ai-history-date">14.09.2026, 10:35</div><div class="kt-ai-history-text">Заявка получена из Лотус (инициатор: Жанара К., филиал «Алма-Ата Север»)</div></div>
|
||
<div class="kt-ai-history-item"><div class="kt-ai-history-date">14.09.2026, 10:42</div><div class="kt-ai-history-text">ИИ-агент извлёк данные, подтянул тариф из SAP</div></div>
|
||
<div class="kt-ai-history-item"><div class="kt-ai-history-date">14.09.2026, 10:43</div><div class="kt-ai-history-text">Выставлены риск-флаги: тариф, полномочия</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="screen-registry" class="kt-ai-screen">
|
||
<h2 class="kt-ai-section-title" style="margin-bottom: var(--kt-ai-space-5);">Реестр договоров</h2>
|
||
<div class="kt-ai-search-bar">
|
||
<input type="text" class="kt-ai-input" placeholder="Поиск по реестру..." id="registry-search">
|
||
<div class="kt-ai-filter-group">
|
||
<button class="kt-ai-filter-btn active" data-reg-filter="all">Все</button>
|
||
<button class="kt-ai-filter-btn" data-reg-filter="approved">Согласованные</button>
|
||
<button class="kt-ai-filter-btn" data-reg-filter="returned">Возвращённые</button>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-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="registry-table-body"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="screen-new" class="kt-ai-screen">
|
||
<div class="kt-ai-detail-card" style="max-width: 720px;">
|
||
<h2 class="kt-ai-section-title">Новая заявка на договор аренды</h2>
|
||
<p class="kt-ai-meta" style="margin-bottom: var(--kt-ai-space-6);">Филиал → Лотус → ИИ-агент</p>
|
||
<form onsubmit="submitApplication(event)">
|
||
<div class="kt-ai-field-group"><label class="kt-ai-field-label">Филиал</label><select class="kt-ai-input" required><option>Алма-Ата Север</option><option>Алма-Ата Юг</option><option>Астана Центр</option><option>Шымкент</option><option>Караганда</option></select></div>
|
||
<div class="kt-ai-field-group"><label class="kt-ai-field-label">Инициатор</label><input type="text" class="kt-ai-input" placeholder="ФИО" required></div>
|
||
<div class="kt-ai-field-group"><label class="kt-ai-field-label">Контрагент</label><input type="text" class="kt-ai-input" placeholder="ТОО / ИП" required></div>
|
||
<div class="kt-ai-field-group"><label class="kt-ai-field-label">Объект аренды</label><input type="text" class="kt-ai-input" placeholder="Адрес, тип помещения" required></div>
|
||
<div class="kt-ai-field-group"><label class="kt-ai-field-label">Площадь (м²)</label><input type="number" class="kt-ai-input" placeholder="125" required></div>
|
||
<div class="kt-ai-field-group"><label class="kt-ai-field-label">Срок аренды</label><select class="kt-ai-input" required><option>11 месяцев</option><option>1 год</option><option>2 года</option><option>3 года</option><option>5 лет</option></select></div>
|
||
<div class="kt-ai-field-group"><label class="kt-ai-field-label">Предлагаемая ставка (₸/м²)</label><input type="number" class="kt-ai-input" placeholder="1 200" required></div>
|
||
<div class="kt-ai-field-group"><label class="kt-ai-field-label">Комментарий</label><textarea class="kt-ai-input" rows="4" placeholder="Дополнительная информация..."></textarea></div>
|
||
<div class="kt-ai-actions-bar" style="margin-top: var(--kt-ai-space-6); padding-top: var(--kt-ai-space-5); border-top: 1px solid var(--kt-ai-border);">
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary" data-size="lg">Отправить заявку</button>
|
||
<button type="button" class="kt-ai-btn" data-variant="ghost" onclick="showScreen('queue')">Отмена</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<div class="kt-ai-alem-fab" onclick="askAlem()" title="Спросить Alem">💬</div>
|
||
<div id="toast" class="kt-ai-toast">Действие выполнено</div>
|
||
</div>
|
||
|
||
<script>
|
||
const demoContracts = [
|
||
{ id: 4827, counterparty: 'ТОО «Алма-Ата Ритейл»', object: 'Помещение, 125 м²', amount: '1 350 000 ₸', status: 'review', flags: ['тариф', 'полномочия'] },
|
||
{ id: 4826, counterparty: 'ИП «Сейтжанов А.Б.»', object: 'Склад, 340 м²', amount: '2 890 000 ₸', status: 'ai-processing', flags: [] },
|
||
{ id: 4825, counterparty: 'ТОО «KazOilTrading»', object: 'Офис, 87 м²', amount: '980 000 ₸', status: 'new', flags: [] },
|
||
{ id: 4824, counterparty: 'ТОО «Байконур-Сервис»', object: 'Помещение, 210 м²', amount: '3 150 000 ₸', status: 'review', flags: ['отклонения'] },
|
||
{ id: 4823, counterparty: 'ТОО «Азия Логистик»', object: 'Склад, 1 200 м²', amount: '8 400 000 ₸', status: 'approved', flags: [] },
|
||
{ id: 4822, counterparty: 'ИП «Ким В.И.»', object: 'Торговая точка, 45 м²', amount: '540 000 ₸', status: 'returned', flags: ['неполные данные'] },
|
||
{ id: 4821, counterparty: 'ТОО «Технопарк»', object: 'Офисное здание, 450 м²', amount: '5 400 000 ₸', status: 'new', flags: [] },
|
||
{ id: 4820, counterparty: 'ТОО «Алматы Вода»', object: 'Помещение, 65 м²', amount: '780 000 ₸', status: 'review', flags: ['тариф'] }
|
||
];
|
||
const registryData = [
|
||
{ num: '4815-ДА', counterparty: 'ТОО «КазТелеком»', date: '10.09.2026', amount: '4 200 000 ₸', status: 'approved', lawyer: 'А. Турсынова' },
|
||
{ num: '4812-ДА', counterparty: 'ИП «Омаров»', date: '09.09.2026', amount: '650 000 ₸', status: 'approved', lawyer: 'Б. Сахиев' },
|
||
{ num: '4808-ДА', counterparty: 'ТОО «ФудМастер»', date: '06.09.2026', amount: '1 890 000 ₸', status: 'returned', lawyer: 'Ю. Ким' },
|
||
{ num: '4801-ДА', counterparty: 'ТОО «СтройКомплект»', date: '03.09.2026', amount: '3 600 000 ₸', status: 'approved', lawyer: 'А. Турсынова' }
|
||
];
|
||
let currentFilter = 'all', currentRegFilter = 'all';
|
||
function getStatusLabel(s) { return { 'new': 'Новая', 'ai-processing': 'В обработке ИИ', 'review': 'На проверке', 'approved': 'Согласовано', 'returned': 'Возвращена' }[s] || s; }
|
||
function renderQueue() {
|
||
let f = demoContracts;
|
||
if (currentFilter === 'new') f = f.filter(c => c.status === 'new');
|
||
else if (currentFilter === 'review') f = f.filter(c => c.status === 'review');
|
||
else if (currentFilter === 'risk') f = f.filter(c => c.flags.length > 0);
|
||
const s = document.getElementById('search-input').value.toLowerCase();
|
||
if (s) f = f.filter(c => c.counterparty.toLowerCase().includes(s) || c.id.toString().includes(s));
|
||
document.getElementById('queue-table-body').innerHTML = f.map(c => '<tr><td style="font-weight: var(--kt-ai-weight-medium);">№' + c.id + '</td><td>' + c.counterparty + '</td><td>' + c.object + '</td><td style="font-weight: var(--kt-ai-weight-medium);">' + c.amount + '</td><td><span class="kt-ai-status-pill" data-status="' + c.status + '">' + getStatusLabel(c.status) + '</span></td><td>' + (c.flags.length > 0 ? '<span class="kt-ai-flag-badge">⚠️ ' + c.flags.join(', ') + '</span>' : '—') + '</td><td><button class="kt-ai-btn" data-variant="ghost" data-size="sm" onclick="openDetail(' + c.id + ')">Проверить</button></td></tr>').join('');
|
||
}
|
||
function renderRegistry() {
|
||
let f = registryData;
|
||
if (currentRegFilter === 'approved') f = f.filter(c => c.status === 'approved');
|
||
else if (currentRegFilter === 'returned') f = f.filter(c => c.status === 'returned');
|
||
const s = document.getElementById('registry-search').value.toLowerCase();
|
||
if (s) f = f.filter(c => c.counterparty.toLowerCase().includes(s) || c.num.toLowerCase().includes(s));
|
||
document.getElementById('registry-table-body').innerHTML = f.map(c => '<tr><td style="font-weight: var(--kt-ai-weight-medium);">' + c.num + '</td><td>' + c.counterparty + '</td><td>' + c.date + '</td><td style="font-weight: var(--kt-ai-weight-medium);">' + c.amount + '</td><td><span class="kt-ai-status-pill" data-status="' + c.status + '">' + getStatusLabel(c.status) + '</span></td><td>' + c.lawyer + '</td></tr>').join('');
|
||
}
|
||
function showScreen(n) { document.querySelectorAll('.kt-ai-screen').forEach(s => s.classList.remove('active')); document.querySelectorAll('.kt-ai-nav-item').forEach(n => n.classList.remove('active')); document.getElementById('screen-' + n).classList.add('active'); const nav = document.querySelector('.kt-ai-nav-item[data-screen="' + n + '"]'); if (nav) nav.classList.add('active'); if (n === 'queue') renderQueue(); if (n === 'registry') renderRegistry(); }
|
||
function openDetail(id) { const c = demoContracts.find(x => x.id === id); if (!c) return; document.getElementById('detail-title').textContent = 'Заявка №' + c.id; document.getElementById('detail-counterparty').textContent = c.counterparty; document.getElementById('detail-contract-num').textContent = c.id + '-ДА'; document.getElementById('screen-queue').classList.remove('active'); document.getElementById('screen-detail').classList.add('active'); document.querySelectorAll('.kt-ai-nav-item').forEach(n => n.classList.remove('active')); }
|
||
function approveContract() { showToast('✓ Договор подтверждён и отправлен на согласование'); setTimeout(() => showScreen('queue'), 1000); }
|
||
function returnForRevision() { showToast('↩ Заявка возвращена инициатору на доработку'); setTimeout(() => showScreen('queue'), 1000); }
|
||
function askAlem() { showToast('💬 Alem: Чем могу помочь?'); }
|
||
function submitApplication(e) { e.preventDefault(); showToast('✓ Заявка отправлена в Лотус'); setTimeout(() => showScreen('queue'), 1000); }
|
||
function showToast(m) { const t = document.getElementById('toast'); t.textContent = m; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2500); }
|
||
document.querySelectorAll('.kt-ai-nav-item').forEach(item => item.addEventListener('click', () => showScreen(item.dataset.screen)));
|
||
document.querySelectorAll('.kt-ai-filter-btn').forEach(btn => btn.addEventListener('click', () => { btn.parentElement.querySelectorAll('.kt-ai-filter-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); if (btn.dataset.filter) { currentFilter = btn.dataset.filter; renderQueue(); } else if (btn.dataset.regFilter) { currentRegFilter = btn.dataset.regFilter; renderRegistry(); } }));
|
||
document.getElementById('search-input').addEventListener('input', renderQueue);
|
||
document.getElementById('registry-search').addEventListener('input', renderRegistry);
|
||
renderQueue();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|