216 lines
11 KiB
HTML
216 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>KonturCC Продажи</title>
|
|
<link rel="icon" href="/operator/assets/favicon.svg" type="image/svg+xml" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="/operator/assets/styles.css" />
|
|
<link rel="stylesheet" href="/sales/assets/styles.css?v=sales-v1" />
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<div class="brand-mark">S</div>
|
|
<div>
|
|
<div class="brand-title">KonturCC</div>
|
|
<div class="brand-sub">Sales orchestration</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="nav-menu">
|
|
<div class="nav-group">
|
|
<div class="nav-label">Рабочие зоны</div>
|
|
<a class="nav-link" href="/operator"><span class="nav-bullet"></span>Оператор</a>
|
|
<a class="nav-link" href="/supervisor"><span class="nav-bullet"></span>Супервизор</a>
|
|
<a class="nav-link" href="/analyst"><span class="nav-bullet"></span>Аналитика</a>
|
|
<a class="nav-link" href="/admin"><span class="nav-bullet"></span>Администрирование</a>
|
|
<a class="nav-link active" href="/sales"><span class="nav-bullet"></span>Продажи</a>
|
|
</div>
|
|
<div class="nav-group">
|
|
<div class="nav-label">Секции</div>
|
|
<a class="nav-link active" href="#overview"><span class="nav-bullet"></span>Воронка</a>
|
|
<a class="nav-link" href="#dealPanel"><span class="nav-bullet"></span>Карточка сделки</a>
|
|
<a class="nav-link" href="#createLeadPanel"><span class="nav-bullet"></span>Новый лид</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<strong>Модуль продаж</strong>
|
|
<p>Одна сделка живет через text и voice. Здесь же этапы, офферы, счета, оплаты, эскалации и handoff между каналами.</p>
|
|
<button id="logoutBtn" class="btn ghost" type="button">Выйти</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="workspace">
|
|
<header class="workspace-topbar reveal">
|
|
<div class="search-box">
|
|
<input id="salesSearch" class="app-search" placeholder="Найти по сделке, клиенту, задаче или каналу..." />
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<div class="status-pill" id="gatewayStatus">Шлюз: проверка...</div>
|
|
<button id="refreshSalesBtn" class="btn ghost" type="button">Обновить</button>
|
|
<div class="profile-chip">
|
|
<div class="avatar-badge">SL</div>
|
|
<div class="profile-meta">
|
|
<div class="profile-name" id="profileName">Экран продаж</div>
|
|
<div class="profile-role" id="profileRole">Omnichannel pipeline</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout sales-layout">
|
|
<section class="page-hero reveal" id="overview">
|
|
<p class="eyebrow">Sales Control Room</p>
|
|
<h1>Омниканальная воронка продаж</h1>
|
|
<p class="hint">Теплый лид попадает в CRM, дальше система ведет его через коммуникации, оффер, документы, счет, оплату и post-sale handoff без потери контекста.</p>
|
|
</section>
|
|
|
|
<section class="panel auth reveal" id="authPanel">
|
|
<h2>Сессия</h2>
|
|
<div class="row">
|
|
<label>Пользователь</label>
|
|
<input id="sessionUser" value="admin" />
|
|
</div>
|
|
<div class="row">
|
|
<label>Роль</label>
|
|
<select id="sessionRole">
|
|
<option value="admin" selected>Администратор</option>
|
|
<option value="supervisor">Супервизор</option>
|
|
<option value="operator">Оператор</option>
|
|
<option value="analyst">Аналитик</option>
|
|
</select>
|
|
</div>
|
|
<div class="row">
|
|
<label>Пароль</label>
|
|
<input id="sessionPassword" type="password" value="admin123" />
|
|
</div>
|
|
<div class="actions">
|
|
<button id="loginBtn" class="btn" type="button">Войти</button>
|
|
</div>
|
|
<p class="hint" id="sessionInfo">Токен: отсутствует</p>
|
|
</section>
|
|
|
|
<section class="sales-dashboard-grid reveal" id="salesDashboard"></section>
|
|
|
|
<section class="sales-main-grid">
|
|
<article class="panel reveal sales-board-panel">
|
|
<div class="sales-board-head">
|
|
<div>
|
|
<h2>Воронка</h2>
|
|
<p class="hint">Колонки собраны по крупным бизнес-блокам из ТЗ: вход, коммуникация, коммерция, оформление, финансы и закрытие.</p>
|
|
</div>
|
|
<div class="sales-toolbar">
|
|
<button id="openCreateLeadBtn" class="btn" type="button">Добавить лид</button>
|
|
</div>
|
|
</div>
|
|
<div id="salesBoard" class="sales-board"></div>
|
|
</article>
|
|
|
|
<aside class="sales-detail-stack">
|
|
<article class="panel reveal sales-detail-panel" id="dealPanel">
|
|
<div class="sales-detail-head">
|
|
<div>
|
|
<p class="eyebrow">Карточка сделки</p>
|
|
<h2 id="dealTitle">Выберите сделку</h2>
|
|
<p id="dealSubtitle" class="hint">Справа будет единый контекст: text + voice, офферы, счета, оплата, timeline.</p>
|
|
</div>
|
|
<div id="dealStageBadge" class="status-pill">Нет данных</div>
|
|
</div>
|
|
|
|
<div class="sales-quick-actions">
|
|
<button id="startTextBtn" class="btn ghost" type="button">Текстовая сессия</button>
|
|
<button id="startVoiceBtn" class="btn ghost" type="button">Голосовая сессия</button>
|
|
<button id="switchToTextBtn" class="btn ghost" type="button">Voice -> Text</button>
|
|
<button id="switchToVoiceBtn" class="btn ghost" type="button">Text -> Voice</button>
|
|
<button id="createOfferBtn" class="btn ghost" type="button">Создать оффер</button>
|
|
<button id="createInvoiceBtn" class="btn ghost" type="button">Выставить счет</button>
|
|
<button id="markPaidBtn" class="btn ghost" type="button">Отметить оплату</button>
|
|
</div>
|
|
|
|
<div class="inline-form compact">
|
|
<select id="dealStageSelect"></select>
|
|
<button id="saveStageBtn" class="btn" type="button">Сменить этап</button>
|
|
</div>
|
|
|
|
<div class="inline-form compact">
|
|
<input id="nextActionType" placeholder="Следующий шаг, например follow_up_call" />
|
|
<input id="nextActionAt" placeholder="2026-05-10T12:00:00+05:00" />
|
|
<button id="saveNextActionBtn" class="btn ghost" type="button">Сохранить next action</button>
|
|
</div>
|
|
|
|
<div class="sales-bind-grid">
|
|
<input id="telegramThreadId" placeholder="Telegram thread id" />
|
|
<input id="telegramChatId" placeholder="Telegram chat id" />
|
|
<button id="bindTelegramBtn" class="btn ghost" type="button">Привязать Telegram</button>
|
|
<input id="voiceSessionId" placeholder="Voice session id" />
|
|
<button id="bindVoiceSessionBtn" class="btn ghost" type="button">Привязать voice session</button>
|
|
</div>
|
|
|
|
<div class="sales-inline-message">
|
|
<textarea id="telegramReplyText" rows="3" class="json-textarea" placeholder="Временная текстовая отправка через Telegram bot в рамках этой сделки."></textarea>
|
|
<button id="sendTelegramReplyBtn" class="btn" type="button">Отправить в Telegram</button>
|
|
</div>
|
|
|
|
<div class="sales-detail-metrics" id="dealMetrics"></div>
|
|
<div id="dealWorkspace" class="sales-workspace-empty">Выберите карточку на воронке, чтобы увидеть подробности.</div>
|
|
</article>
|
|
|
|
<article class="panel reveal" id="createLeadPanel">
|
|
<h2>Новый лид</h2>
|
|
<div class="inline-form split-two">
|
|
<input id="leadName" placeholder="Имя клиента" />
|
|
<input id="leadCompany" placeholder="Компания" />
|
|
</div>
|
|
<div class="inline-form split-two">
|
|
<input id="leadPhone" placeholder="Телефон" />
|
|
<input id="leadEmail" placeholder="Email" />
|
|
</div>
|
|
<div class="inline-form split-two">
|
|
<select id="leadSourceChannel">
|
|
<option value="telegram">Telegram</option>
|
|
<option value="whatsapp">WhatsApp</option>
|
|
<option value="webchat">Webchat</option>
|
|
<option value="email">Email</option>
|
|
<option value="voice">Voice</option>
|
|
</select>
|
|
<select id="leadPreferredChannel">
|
|
<option value="telegram">Telegram</option>
|
|
<option value="whatsapp">WhatsApp</option>
|
|
<option value="webchat">Webchat</option>
|
|
<option value="email">Email</option>
|
|
<option value="voice">Voice</option>
|
|
</select>
|
|
</div>
|
|
<div class="inline-form split-two">
|
|
<select id="leadTemperature">
|
|
<option value="warm">Warm</option>
|
|
<option value="hot">Hot</option>
|
|
</select>
|
|
<input id="leadScore" type="number" min="0" max="100" value="68" />
|
|
</div>
|
|
<div class="row">
|
|
<label for="leadNeedSummary">Краткая потребность</label>
|
|
<textarea id="leadNeedSummary" rows="4" class="json-textarea" placeholder="Например: клиенту нужен расчет, коммерческое предложение и созвон сегодня."></textarea>
|
|
</div>
|
|
<div class="actions compact-actions">
|
|
<button id="createLeadBtn" class="btn" type="button">Создать лид</button>
|
|
<button id="seedDemoBtn" class="btn ghost" type="button">Создать demo-сделку</button>
|
|
</div>
|
|
<pre id="salesLog" class="output">Здесь появятся ответы сервиса и состояние быстрых действий.</pre>
|
|
</article>
|
|
</aside>
|
|
</section>
|
|
</main>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="/sales/assets/app.js"></script>
|
|
</body>
|
|
</html>
|