407 lines
22 KiB
HTML
407 lines
22 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Архивирование лицевых счетов — CRM 2.0</title>
|
||
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #f1f5f9; line-height: 1.6; }
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
|
||
|
||
/* Hero */
|
||
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 20px; }
|
||
.hero h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; margin-bottom: 24px; background: linear-gradient(90deg, #38bdf8, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||
.hero p { font-size: clamp(16px, 2vw, 20px); color: #94a3b8; max-width: 700px; margin: 0 auto 40px; }
|
||
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||
.btn { padding: 14px 28px; border-radius: 10px; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; border: none; transition: all 0.3s; }
|
||
.btn-primary { background: linear-gradient(90deg, #38bdf8, #818cf8); color: #0f172a; }
|
||
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(56, 189, 248, 0.3); }
|
||
.btn-secondary { background: rgba(255,255,255,0.1); color: #f1f5f9; border: 1px solid rgba(255,255,255,0.2); }
|
||
.btn-secondary:hover { background: rgba(255,255,255,0.15); }
|
||
|
||
/* Sections */
|
||
section { padding: 100px 0; }
|
||
.section-title { font-size: clamp(28px, 4vw, 42px); font-weight: 700; text-align: center; margin-bottom: 16px; }
|
||
.section-subtitle { text-align: center; color: #94a3b8; font-size: 18px; max-width: 600px; margin: 0 auto 60px; }
|
||
|
||
/* Problems */
|
||
.problems-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||
.problem-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 32px; transition: all 0.3s; }
|
||
.problem-card:hover { transform: translateY(-4px); border-color: rgba(248, 113, 113, 0.5); }
|
||
.problem-icon { font-size: 32px; margin-bottom: 16px; }
|
||
.problem-card h3 { font-size: 20px; margin-bottom: 12px; color: #fca5a5; }
|
||
.problem-card p { color: #94a3b8; font-size: 15px; }
|
||
|
||
/* Solution */
|
||
.solution { background: rgba(56, 189, 248, 0.05); }
|
||
.solution-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
|
||
.solution-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(56, 189, 248, 0.2); border-radius: 16px; padding: 32px; }
|
||
.solution-card h3 { font-size: 20px; margin-bottom: 12px; color: #7dd3fc; }
|
||
.solution-card p { color: #94a3b8; font-size: 15px; }
|
||
.step-number { display: inline-block; width: 32px; height: 32px; background: linear-gradient(90deg, #38bdf8, #818cf8); color: #0f172a; border-radius: 50%; text-align: center; line-height: 32px; font-weight: 700; margin-right: 12px; }
|
||
|
||
/* Process */
|
||
.process-flow { background: rgba(255,255,255,0.03); border-radius: 20px; padding: 40px; margin-top: 40px; }
|
||
.flow-step { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 24px; padding: 20px; background: rgba(255,255,255,0.05); border-radius: 12px; }
|
||
.flow-step:last-child { margin-bottom: 0; }
|
||
.flow-step .num { font-size: 24px; font-weight: 700; color: #38bdf8; min-width: 40px; }
|
||
.flow-step h4 { font-size: 18px; margin-bottom: 8px; }
|
||
.flow-step p { color: #94a3b8; font-size: 14px; }
|
||
|
||
/* Requirements */
|
||
.req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; }
|
||
.req-item { display: flex; gap: 16px; padding: 20px; background: rgba(255,255,255,0.05); border-radius: 12px; border-left: 4px solid #818cf8; }
|
||
.req-id { font-weight: 700; color: #818cf8; min-width: 60px; }
|
||
.req-text { color: #e2e8f0; font-size: 15px; }
|
||
|
||
/* Use Cases */
|
||
.use-cases { background: rgba(129, 140, 248, 0.05); }
|
||
.uc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
|
||
.uc-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(129, 140, 248, 0.2); border-radius: 16px; padding: 32px; }
|
||
.uc-card h3 { font-size: 20px; margin-bottom: 16px; color: #a5b4fc; }
|
||
.uc-card ul { list-style: none; color: #94a3b8; font-size: 15px; }
|
||
.uc-card li { margin-bottom: 8px; padding-left: 20px; position: relative; }
|
||
.uc-card li::before { content: "→"; position: absolute; left: 0; color: #818cf8; }
|
||
|
||
/* Acceptance */
|
||
.ac-table { width: 100%; border-collapse: collapse; margin-top: 40px; }
|
||
.ac-table th, .ac-table td { padding: 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.1); }
|
||
.ac-table th { background: rgba(255,255,255,0.05); color: #94a3b8; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||
.ac-table td { color: #e2e8f0; font-size: 15px; }
|
||
.ac-table tr:hover { background: rgba(255,255,255,0.03); }
|
||
.ac-id { color: #38bdf8; font-weight: 700; }
|
||
|
||
/* Footer */
|
||
footer { padding: 60px 0; text-align: center; border-top: 1px solid rgba(255,255,255,0.1); }
|
||
footer p { color: #64748b; font-size: 14px; }
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.hero { padding: 60px 20px; }
|
||
section { padding: 60px 0; }
|
||
.process-flow { padding: 24px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Автоматическое архивирование лицевых счетов</h1>
|
||
<p>Система автоматизации архивирования расторгнутых ЛС для CRM 2.0. Исключает ручную работу, ошибки и обеспечивает прозрачный контроль процесса.</p>
|
||
<div class="hero-buttons">
|
||
<a href="#problems" class="btn btn-secondary">Проблемы</a>
|
||
<a href="#solution" class="btn btn-primary">Решение</a>
|
||
<a href="#requirements" class="btn btn-secondary">Требования</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Problems -->
|
||
<section id="problems">
|
||
<div class="container">
|
||
<h2 class="section-title">Проблемы текущего процесса</h2>
|
||
<p class="section-subtitle">AS IS: ручное архивирование через списки</p>
|
||
<div class="problems-grid">
|
||
<div class="problem-card">
|
||
<div class="problem-icon">📋</div>
|
||
<h3>Зависимость от списков</h3>
|
||
<p>Зависимость от полноты и своевременности передаваемых списков ЛС</p>
|
||
</div>
|
||
<div class="problem-card">
|
||
<div class="problem-icon">⚠️</div>
|
||
<h3>Риск ошибок</h3>
|
||
<p>Риск пропуска ЛС, ошибок и повторной обработки при ручной работе</p>
|
||
</div>
|
||
<div class="problem-card">
|
||
<div class="problem-icon">🔄</div>
|
||
<h3>Нет перепроверки</h3>
|
||
<p>Отсутствие гарантированной ежедневной перепроверки невыполненных условий</p>
|
||
</div>
|
||
<div class="problem-card">
|
||
<div class="problem-icon">⏳</div>
|
||
<h3>Непрозрачный срок</h3>
|
||
<p>Непрозрачный срок перехода из статуса «Расторгнут» в статус «Архивный»</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Solution -->
|
||
<section id="solution" class="solution">
|
||
<div class="container">
|
||
<h2 class="section-title">Целевой процесс</h2>
|
||
<p class="section-subtitle">TO BE: полностью автоматическое архивирование</p>
|
||
<div class="solution-grid">
|
||
<div class="solution-card">
|
||
<h3><span class="step-number">1</span>Автозапуск</h3>
|
||
<p>Процесс запускается автоматически после расторжения ЛС. Система устанавливает статус «Расторгнут» и создаёт экземпляр процесса в Camunda.</p>
|
||
</div>
|
||
<div class="solution-card">
|
||
<h3><span class="step-number">2</span>Ожидание 30 дней</h3>
|
||
<p>Процесс ожидает 30 календарных дней с даты расторжения перед первой бизнес-проверкой.</p>
|
||
</div>
|
||
<div class="solution-card">
|
||
<h3><span class="step-number">3</span>Проверка сальдо</h3>
|
||
<p>Система проверяет отсутствие дебетового и кредитового сальдо по ЛС.</p>
|
||
</div>
|
||
<div class="solution-card">
|
||
<h3><span class="step-number">4</span>Архивирование</h3>
|
||
<p>При выполнении условий ЛС переводится в статус «Архивный». При невыполнении — проверка повторяется ежедневно.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="process-flow">
|
||
<h3 style="margin-bottom: 24px; color: #7dd3fc;">Последовательность процесса</h3>
|
||
<div class="flow-step">
|
||
<div class="num">1</div>
|
||
<div>
|
||
<h4>Расторжение ЛС</h4>
|
||
<p>Система устанавливает статус «Расторгнут» и создаёт процесс архивирования</p>
|
||
</div>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="num">2</div>
|
||
<div>
|
||
<h4>Ожидание 30 дней</h4>
|
||
<p>Выдерживается обязательный период ожидания перед проверкой</p>
|
||
</div>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="num">3</div>
|
||
<div>
|
||
<h4>Проверка условий (CHK-01, CHK-02)</h4>
|
||
<p>Дебетовое сальдо = 0? Кредитовое сальдо = 0? Если нет → повтор через 24 часа</p>
|
||
</div>
|
||
</div>
|
||
<div class="flow-step">
|
||
<div class="num">4</div>
|
||
<div>
|
||
<h4>Перевод в «Архивный»</h4>
|
||
<p>CRM получает обновлённый статус, применяются правила отображения</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CRM Requirements -->
|
||
<section id="crm">
|
||
<div class="container">
|
||
<h2 class="section-title">Требования к CRM 2.0</h2>
|
||
<p class="section-subtitle">Отображение customer и ЛС, создание клиентов</p>
|
||
|
||
<h3 style="color: #7dd3fc; margin-bottom: 20px;">Отображение customer и ЛС</h3>
|
||
<div class="req-grid" style="margin-bottom: 40px;">
|
||
<div class="req-item">
|
||
<div class="req-id">Ситуация 1</div>
|
||
<div class="req-text">Есть хотя бы один неархивный ЛС → Customer доступен как действующий. Архивные ЛС показываются со статусом «Архивный» без финансовых данных</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">Ситуация 2</div>
|
||
<div class="req-text">Все ЛС customer архивные → Customer виден в поиске со статусом «Архивный». Карточка неактивна для обычного пользователя</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">Ситуация 3</div>
|
||
<div class="req-text">Пользователь с расширенными правами → доступ определяется отдельной ролью, ограничения могут быть сняты</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="color: #7dd3fc; margin-bottom: 20px;">Создание нового клиента по ИИН</h3>
|
||
<div class="req-grid">
|
||
<div class="req-item">
|
||
<div class="req-id">ИИН не найден</div>
|
||
<div class="req-text">Создать нового клиента по стандартному сценарию</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">Есть неархивный ЛС</div>
|
||
<div class="req-text">Запретить создание, показать сообщение о существующем клиенте</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">Все ЛС архивные</div>
|
||
<div class="req-text">Разрешить создание нового клиента. Ошибка «ИИН уже существует» не выводится</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">Несколько customer</div>
|
||
<div class="req-text">Создание разрешено только если у ВСЕХ customer все ЛС архивные</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Functional Requirements -->
|
||
<section id="requirements" class="solution">
|
||
<div class="container">
|
||
<h2 class="section-title">Функциональные требования</h2>
|
||
<p class="section-subtitle">Ключевые требования к системе</p>
|
||
<div class="req-grid">
|
||
<div class="req-item">
|
||
<div class="req-id">FR-01</div>
|
||
<div class="req-text">Автоматически запускать процесс после расторжения ЛС</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">FR-02</div>
|
||
<div class="req-text">Выдерживать 30 календарных дней перед первой проверкой</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">FR-03</div>
|
||
<div class="req-text">Проверять дебетовое и кредитовое сальдо</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">FR-04</div>
|
||
<div class="req-text">При невыполнении условий повторять проверки ежедневно</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">FR-05</div>
|
||
<div class="req-text">При выполнении всех условий переводить ЛС в статус «Архивный»</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">FR-06</div>
|
||
<div class="req-text">Отображать архивный статус customer/ЛС по правилам</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">FR-07</div>
|
||
<div class="req-text">Скрывать ограниченные данные архивного ЛС для обычного пользователя</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">FR-08</div>
|
||
<div class="req-text">Разрешать создание нового клиента с тем же ИИН, если все ЛС архивные</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">FR-09</div>
|
||
<div class="req-text">Блокировать создание при наличии неархивного ЛС</div>
|
||
</div>
|
||
<div class="req-item">
|
||
<div class="req-id">FR-10</div>
|
||
<div class="req-text">Журналировать бизнес-решения, технические ошибки и ручные операции</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Use Cases -->
|
||
<section id="use-cases" class="use-cases">
|
||
<div class="container">
|
||
<h2 class="section-title">Use Cases</h2>
|
||
<p class="section-subtitle">Основные сценарии использования</p>
|
||
<div class="uc-grid">
|
||
<div class="uc-card">
|
||
<h3>UC-01: Автоматическое архивирование</h3>
|
||
<ul>
|
||
<li>ЛС расторгнут, процесс не завершён</li>
|
||
<li>CRM ждёт 30 дней</li>
|
||
<li>Получает результаты всех проверок</li>
|
||
<li>При успехе — архив, при отказе — повтор завтра</li>
|
||
</ul>
|
||
</div>
|
||
<div class="uc-card">
|
||
<h3>UC-02: Просмотр customer с разными ЛС</h3>
|
||
<ul>
|
||
<li>У customer есть неархивный и архивный ЛС</li>
|
||
<li>Неархивные ЛС отображаются полностью</li>
|
||
<li>Архивные ЛС — со статусом и ограничениями</li>
|
||
</ul>
|
||
</div>
|
||
<div class="uc-card">
|
||
<h3>UC-03: Customer полностью архивный</h3>
|
||
<ul>
|
||
<li>Все ЛС customer архивные</li>
|
||
<li>Customer виден в поиске со статусом «Архивный»</li>
|
||
<li>Переход в карточку ограничен для обычного пользователя</li>
|
||
</ul>
|
||
</div>
|
||
<div class="uc-card">
|
||
<h3>UC-04: Новый клиент по ИИН архивного customer</h3>
|
||
<ul>
|
||
<li>ИИН найден, все ЛС customer архивные</li>
|
||
<li>CRM проверяет статусы всех ЛС</li>
|
||
<li>Новый клиент создаётся без ошибки «ИИН уже существует»</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Acceptance Criteria -->
|
||
<section id="acceptance">
|
||
<div class="container">
|
||
<h2 class="section-title">Критерии приёмки</h2>
|
||
<p class="section-subtitle">AC: условия успешной реализации</p>
|
||
<table class="ac-table">
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Дано</th>
|
||
<th>Ожидаемый результат</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="ac-id">AC-01</td>
|
||
<td>Расторгнут ЛС</td>
|
||
<td>Создан процесс; первая проверка не ранее чем через 30 календарных дней</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="ac-id">AC-02</td>
|
||
<td>Все проверки успешны</td>
|
||
<td>ЛС получает статус «Архивный»; повторный запуск не создаёт дублей</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="ac-id">AC-03</td>
|
||
<td>Есть дебетовое или кредитовое сальдо</td>
|
||
<td>ЛС остаётся «Расторгнут»; есть запись причины и повторная проверка</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="ac-id">AC-04</td>
|
||
<td>Все ЛС customer архивные</td>
|
||
<td>Customer виден в поиске как архивный; обычный пользователь не получает закрытые данные</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="ac-id">AC-05</td>
|
||
<td>Есть действующий ЛС</td>
|
||
<td>Customer доступен; архивные ЛС помечены и ограничены</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="ac-id">AC-06</td>
|
||
<td>Создание клиента: все ЛС всех customer архивные</td>
|
||
<td>Новый клиент создаётся без ошибки «ИИН уже существует»</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="ac-id">AC-07</td>
|
||
<td>Создание клиента: есть неархивный ЛС</td>
|
||
<td>Создание блокируется с понятным сообщением</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="ac-id">AC-08</td>
|
||
<td>Ошибка интеграции при проверке</td>
|
||
<td>Архивирование не выполняется; создаётся запись и повторная попытка</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="container">
|
||
<p>Техническое задание: Отображение и автоматическое архивирование лицевых счетов</p>
|
||
<p style="margin-top: 8px; color: #475569;">CRM 2.0 • Camunda BPM • Статусная модель ЛС</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|