work-license-server 1.0.14 → 1.0.16

package/assets/landing.js

@@ -277,6 +277,16 @@
         catch { /* сессия устарела */ }
     }
 
+    let franchiseCountdownTimer = null;
+    let activeCabinetTab = 'servers';
+
+    function switchCabinetTab(tab = 'servers') {
+        activeCabinetTab = tab === 'franchises' ? 'franchises' : 'servers';
+        $$('[data-cab-tab]').forEach(b => b.classList.toggle('active', b.dataset.cabTab === activeCabinetTab));
+        if ($('#cabSecServers')) $('#cabSecServers').style.display = activeCabinetTab === 'servers' ? '' : 'none';
+        if ($('#cabSecFranchises')) $('#cabSecFranchises').style.display = activeCabinetTab === 'franchises' ? '' : 'none';
+    }
+
     function onAuthenticated() {
         if (!currentUser) return;
         if ($('#tileAddons')) $('#tileAddons').style.display = isUserReadyForOrders() ? '' : 'none';
@@ -288,7 +298,6 @@
             } catch { /* ignore */ }
         }
         if ($('#btnAuthText')) $('#btnAuthText').textContent = currentUser.companyName || currentUser.email;
-        if ($('#inpCabinetHubToken')) $('#inpCabinetHubToken').value = currentUser.hubToken || '';
         if ($('#authEmail')) $('#authEmail').value = currentUser.email || '';
         if ($('#authOfertaCheck')) $('#authOfertaCheck').checked = Boolean(currentUser.ofertaAccepted);
         if ($('#userBadgeBox')) {
@@ -296,90 +305,326 @@
             const bossBadge = currentUser.isAdmin ? `<span class="tag ok" style="margin-right:6px">BOSS · Администратор</span> <a href="/admin" style="font-weight:700;margin-right:8px">Открыть Админ-панель →</a> · ` : '';
             $('#userBadgeBox').innerHTML = `${bossBadge}${orgInfo}Аккаунт: <b>${esc(currentUser.email)}</b> · <a href="#" data-action="logout" style="color:var(--muted)">Выйти</a>`;
         }
-        renderCabinetOrders();
-        renderCabinetLicenses();
+        syncClientServerPicker();
+        renderCabinetServers();
+        renderCabinetFranchises();
         moveIndicator();
     }
 
-    function renderCabinetOrders() {
-        const box = $('#cabinetOrdersBox');
+    function getUserServersList() {
+        if (Array.isArray(currentUser?.servers) && currentUser.servers.length) {
+            return currentUser.servers;
+        }
+        if (currentUser?.license) {
+            return [{
+                ...currentUser.license,
+                serverName: currentUser.license.serverName || 'Сервер WORK #1',
+                hubToken: currentUser.license.hubToken || currentUser.hubToken || '',
+                orders: (currentUser.orders || []).filter(o => o.kind !== 'franchise_reservation' && o.kind !== 'franchise_installment'),
+            }];
+        }
+        return [];
+    }
+
+    function syncClientServerPicker(preferredServerId = '') {
+        const wrap = $('#clientServerPickerWrap');
+        const sel = $('#selClientTargetServer');
+        if (!wrap || !sel) return;
+        const servers = getUserServersList();
+        if (!currentUser || !servers.length) {
+            wrap.style.display = 'none';
+            return;
+        }
+        wrap.style.display = '';
+        const variant = $('#segPakVariant button.on')?.dataset.variant || 'pak';
+        const isBaseBuy = variant === 'pak' || variant === 'license_only';
+        const prevVal = preferredServerId || sel.value || '';
+
+        const options = [];
+        for (const s of servers) {
+            const statusHint = s.baseActivated
+                ? `базовая активна · ${s.totalSeats} мест`
+                : 'без базовой лицензии';
+            options.push(`<option value="${esc(s.licenseId)}">${esc(s.serverName)} (${esc(s.licenseId)} · ${statusHint})</option>`);
+        }
+        if (isBaseBuy) {
+            options.push(`<option value="NEW">+ Создать новый сервер в реестре</option>`);
+        }
+        sel.innerHTML = options.join('');
+
+        if (prevVal && Array.from(sel.options).some(o => o.value === prevVal)) {
+            sel.value = prevVal;
+        }
+        else if (isBaseBuy) {
+            const unactivated = servers.find(s => !s.baseActivated);
+            sel.value = unactivated ? unactivated.licenseId : 'NEW';
+        }
+        else {
+            sel.value = servers[0]?.licenseId || '';
+        }
+    }
+
+    function renderCabinetServers() {
+        const box = $('#cabinetServersRegistry');
         if (!box) return;
-        const orders = currentUser?.orders || [];
-        if (!orders.length) {
-            box.innerHTML = `<div style="padding:18px;border-radius:12px;border:1px dashed var(--border);color:var(--muted);text-align:center;">
-                В вашем Личном кабинете пока нет заказов. Перейдите в раздел <a href="#clients" data-stage="clients"><b>«Клиентам»</b></a> (чтобы купить лицензию или ПАК) или <a href="#franchise" data-stage="franchise"><b>«Франшиза»</b></a> (чтобы зарезервировать регион).
+        const servers = getUserServersList();
+        if ($('#navCabServers')) $('#navCabServers').textContent = `Серверы и устройства (${servers.length})`;
+
+        if (!servers.length) {
+            box.innerHTML = `<div style="padding:18px;color:var(--muted);text-align:center;">
+                В реестре пока нет серверов WORK. Введите название нового сервера справа вверху и нажмите <b>«+ Добавить сервер»</b>.
             </div>`;
             return;
         }
-        box.innerHTML = orders.map(o => {
-            const isPaid = o.status === 'paid';
-            const title = (o.items && o.items.length)
-                ? o.items.map(it => esc(it.title)).join(' + ')
-                : esc(o.tierName || o.orderId);
-            const dateStr = o.createdAt ? new Date(o.createdAt).toLocaleString('ru-RU') : '';
-            const statusBadge = isPaid
-                ? `<span class="tag ok">✓ Оплачен</span>`
-                : `<span class="tag">Ожидает оплаты</span>`;
-            const actionsHtml = isPaid
-                ? `<div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:10px">
-                    ${o.invoiceUrl ? `<a class="btn btn-ghost btn-sm" href="${esc(o.invoiceUrl)}" target="_blank" rel="noopener">Открыть счёт-договор (${esc(o.invoiceNumber || o.orderId)}) ↗</a>` : ''}
+
+        box.innerHTML = servers.map((s, idx) => {
+            const lid = s.licenseId;
+            const name = s.serverName || `Сервер WORK #${idx + 1}`;
+            const tok = s.hubToken || currentUser?.hubToken || '';
+            const hwidBound = Boolean(s.hwidBound || s.hardware?.hwidBound || s.hardware?.nodeFingerprint);
+            const hwidText = hwidBound
+                ? `HWID: <code>${esc(s.hardware?.hwid || '')}</code>`
+                : 'ожидает привязки токена в WORK → Лицензия';
+
+            const baseBadge = s.baseActivated
+                ? `<span class="tag ok">✓ Базовая: ${s.baseSeats || 10} вечн. мест + ИИ</span>`
+                : `<span class="tag">Базовая не активна (1 сессия BOSS)</span>`;
+
+            const files = s.licenseFiles || [];
+            const activeAddons = s.activeAddons || [];
+            const serverOrders = (s.orders || []).filter(o => o.status !== 'canceled');
+            const pendingOrders = serverOrders.filter(o => o.status !== 'paid');
+            const paidOrders = serverOrders.filter(o => o.status === 'paid');
+            const canDelete = !s.baseActivated && !activeAddons.length && !paidOrders.length;
+
+            const baseActionsHtml = !s.baseActivated
+                ? `<button class="btn btn-primary btn-sm" data-buy-for-server="${esc(lid)}" data-buy-variant="license_only">Купить базовую (${rub(D.product?.baseLicensePriceRub || 4_000_000)})</button>
+                   <button class="btn btn-ghost btn-sm" data-buy-for-server="${esc(lid)}" data-buy-variant="pak">Купить ПАК с сервером (${rub(D.product?.basePriceRub || 5_000_000)})</button>`
+                : '';
+
+            const addonsSummaryHtml = activeAddons.length
+                ? activeAddons.map(sub => {
+                    const exp = sub.expiresAt ? new Date(sub.expiresAt).toLocaleDateString('ru-RU') : '—';
+                    return `<span class="tag ok" style="margin-right:6px">+${sub.seats} мест · ${esc(sub.tierName || sub.tier)} до ${esc(exp)}</span>`;
+                }).join('')
+                : `<span class="small muted">Доп. места не подключены</span>`;
+
+            const filesHtml = files.length
+                ? `<div style="margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center">
+                    <span class="small muted">Файлы лицензий (<code>#system</code>):</span>
+                    ${files.map((f, fIdx) => `<button class="btn btn-ghost btn-sm" style="padding:4px 10px;font-size:12px" data-download-lic="${esc(lid)}" data-file-idx="${fIdx}">↓ ${esc(f.fileName || 'license.lic.json')}</button>`).join('')}
                    </div>`
-                : `<div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center">
-                    <button class="btn btn-primary btn-sm" data-pay-order="${esc(o.orderId)}" data-pay-method="yookassa">Оплатить через ЮKassa (${rub(o.amountRub)})</button>
-                    <button class="btn btn-ghost btn-sm" data-invoice-toggle="${esc(o.orderId)}">Счёт-договор (для юр. лиц)</button>
-                    <button class="btn btn-ghost btn-sm" data-cancel-order="${esc(o.orderId)}" style="color:var(--danger)">Удалить заказ</button>
-                   </div>
-                   <div id="invBox-${esc(o.orderId)}" style="display:none;margin-top:12px;padding:12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.02)">
-                    <div class="small" style="margin-bottom:8px;font-weight:600">Реквизиты организации для выставления счёта-договора:</div>
-                    <div class="row2">
-                        <div class="field"><label>Наименование организации *</label><input type="text" id="invCompany-${esc(o.orderId)}" value="${esc(o.customer?.name || currentUser?.companyName || '')}" placeholder="ООО «Маслоторг»"></div>
-                        <div class="field"><label>ИНН *</label><input type="text" id="invInn-${esc(o.orderId)}" value="${esc(o.customer?.inn || currentUser?.inn || '')}" placeholder="7701234567" inputmode="numeric"></div>
+                : '';
+
+            const pendingOrdersHtml = pendingOrders.length
+                ? `<div style="margin-top:10px;padding:10px 12px;border-radius:8px;border:1px solid var(--line-strong);background:color-mix(in srgb, var(--warn) 6%, transparent)">
+                    ${pendingOrders.map(o => {
+                        const title = (o.items && o.items.length) ? o.items.map(it => esc(it.title)).join(' + ') : esc(o.tierName || o.orderId);
+                        return `<div style="display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center">
+                            <div class="small"><b>Ожидает оплаты:</b> ${title} · <b>${rub(o.amountRub)}</b></div>
+                            <div style="display:flex;gap:6px;flex-wrap:wrap">
+                                <button class="btn btn-primary btn-sm" style="padding:5px 10px;font-size:12px" data-pay-order="${esc(o.orderId)}" data-pay-method="yookassa">Оплатить ЮKassa</button>
+                                <button class="btn btn-ghost btn-sm" style="padding:5px 10px;font-size:12px" data-invoice-toggle="${esc(o.orderId)}">Счёт юрлицу</button>
+                                <button class="btn btn-ghost btn-sm" style="padding:5px 10px;font-size:12px;color:var(--danger)" data-cancel-order="${esc(o.orderId)}">Отменить</button>
+                            </div>
+                        </div>
+                        <div id="invBox-${esc(o.orderId)}" style="display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)">
+                            <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">
+                                <input type="text" id="invCompany-${esc(o.orderId)}" value="${esc(o.customer?.name || currentUser?.companyName || '')}" placeholder="Организация (ООО «Маслоторг»)" style="width:240px;padding:6px 10px;font-size:13px">
+                                <input type="text" id="invInn-${esc(o.orderId)}" value="${esc(o.customer?.inn || currentUser?.inn || '')}" placeholder="ИНН" style="width:150px;padding:6px 10px;font-size:13px">
+                                <button class="btn btn-primary btn-sm" style="padding:6px 12px;font-size:12.5px" data-pay-order="${esc(o.orderId)}" data-pay-method="invoice">Открыть счёт-договор →</button>
+                            </div>
+                        </div>`;
+                    }).join('')}
+                   </div>`
+                : '';
+
+            return `<div class="sec-item">
+                <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
+                    <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
+                        <b style="font-size:15px">${esc(name)}</b>
+                        <span class="small muted">· <code>${esc(lid)}</code> · ${hwidText}</span>
+                        ${baseBadge}
                     </div>
-                    <button class="btn btn-primary btn-sm" style="margin-top:8px" data-pay-order="${esc(o.orderId)}" data-pay-method="invoice">Сформировать и открыть счёт-договор →</button>
-                   </div>`;
-            return `<div style="padding:14px 16px;border-radius:12px;border:1px solid var(--border);margin-bottom:10px;">
-                <div style="display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center">
-                    <div>
-                        <div style="font-size:12px;color:var(--muted)">Заказ <code>${esc(o.orderId)}</code> · ${esc(dateStr)}</div>
-                        <div style="font-weight:700;font-size:15px;margin-top:2px">${title}</div>
+                    <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
+                        <span class="small muted" style="margin-right:4px">Сессий: <b>${s.totalSeats}</b></span>
+                        <button class="btn btn-ghost btn-sm" style="padding:5px 10px;font-size:12px" data-rename-server="${esc(lid)}" data-current-name="${esc(name)}">Переименовать</button>
+                        ${canDelete ? `<button class="btn btn-ghost btn-sm" style="padding:5px 10px;font-size:12px;color:var(--danger)" data-delete-server="${esc(lid)}">Удалить</button>` : ''}
                     </div>
-                    <div style="text-align:right">
-                        <div style="font-size:18px;font-weight:800">${rub(o.amountRub)}</div>
-                        ${statusBadge}
+                </div>
+
+                <!-- Строка токена привязки этого сервера -->
+                <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px">
+                    <span class="small muted" style="min-width:115px">Токен привязки:</span>
+                    <input type="text" id="srvTok-${esc(lid)}" readonly value="${esc(tok)}" style="flex:1;min-width:200px;max-width:440px;padding:6px 10px;font-family:monospace;font-size:12px;border-radius:8px">
+                    <button class="btn btn-primary btn-sm" style="padding:6px 12px;font-size:12px" data-copy-server-token="${esc(lid)}">Скопировать токен</button>
+                    <button class="btn btn-ghost btn-sm" style="padding:6px 10px;font-size:12px" data-regen-server-token="${esc(lid)}">Перевыпустить</button>
+                    <span class="small" id="srvTokStatus-${esc(lid)}" style="color:var(--ok)"></span>
+                </div>
+
+                <!-- Строка лицензий и докупки мест -->
+                <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px">
+                    <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
+                        <span class="small muted" style="min-width:115px">Доп. лицензии:</span>
+                        ${addonsSummaryHtml}
+                    </div>
+                    <div style="display:flex;gap:6px;flex-wrap:wrap">
+                        ${baseActionsHtml}
+                        <button class="btn btn-ghost btn-sm" style="padding:5px 10px;font-size:12px" data-buy-for-server="${esc(lid)}" data-buy-variant="addons_only">+ Докупить рабочие места</button>
                     </div>
                 </div>
-                ${actionsHtml}
+
+                ${filesHtml}
+                ${pendingOrdersHtml}
             </div>`;
         }).join('');
     }
 
-    function renderCabinetLicenses() {
-        const box = $('#cabinetLicensesBox');
+    function fmtCountdown(sec) {
+        const s = Math.max(0, Math.floor(Number(sec) || 0));
+        const m = Math.floor(s / 60);
+        const r = s % 60;
+        return `${String(m).padStart(2, '0')}:${String(r).padStart(2, '0')}`;
+    }
+
+    function startFranchiseCountdowns() {
+        if (franchiseCountdownTimer) {
+            clearInterval(franchiseCountdownTimer);
+            franchiseCountdownTimer = null;
+        }
+        const nodes = $$('[data-deposit-deadline]');
+        if (!nodes.length) return;
+        franchiseCountdownTimer = setInterval(() => {
+            const now = Date.now();
+            let expiredAny = false;
+            for (const el of $$('[data-deposit-deadline]')) {
+                const deadline = Number(el.dataset.depositDeadline || 0);
+                const remSec = Math.max(0, Math.floor((deadline - now) / 1000));
+                el.textContent = fmtCountdown(remSec);
+                if (remSec <= 0) expiredAny = true;
+            }
+            if (expiredAny) {
+                clearInterval(franchiseCountdownTimer);
+                franchiseCountdownTimer = null;
+                refreshCabinetUser();
+                refreshCatalogRegions();
+            }
+        }, 1000);
+    }
+
+    function renderCabinetFranchises() {
+        const box = $('#cabinetFranchisesRegistry');
         if (!box) return;
-        const lic = currentUser?.license;
-        const files = lic?.licenseFiles || [];
-        const reservations = (currentUser?.reservations || []).filter(r => r.depositPaid);
-        if (!files.length && !reservations.length) {
-            box.innerHTML = `<div style="padding:12px 14px;border-radius:10px;border:1px dashed var(--border);color:var(--muted);">
-                Активных оплаченных лицензий пока нет. После оплаты заказа выше подписанные файлы лицензий (<code>.lic.json</code>) сразу появятся здесь и автоматически загрузятся в ваш локальный WORK по токену владельца.
+        const franchises = currentUser?.franchises || currentUser?.reservations || [];
+        const activeList = franchises.filter(f => f && f.status !== 'canceled' && f.status !== 'expired');
+        if ($('#navCabFranchises')) $('#navCabFranchises').textContent = `Региональные франшизы (${activeList.length})`;
+
+        if (!activeList.length) {
+            box.innerHTML = `<div style="padding:18px;color:var(--muted);text-align:center;">
+                У вас пока нет зарезервированных или действующих региональных франшиз. Нажмите <b>«+ Выбрать регион на карте РФ»</b> справа вверху.
             </div>`;
+            startFranchiseCountdowns();
             return;
         }
-        const rows = files.map(f => {
-            const lf = f.licenseFile || f;
-            const isBase = lf.kind === 'base' || lf.perpetual;
-            const expText = isBase ? 'Бессрочно (постоянная)' : (lf.expiresAt ? 'до ' + new Date(lf.expiresAt).toLocaleDateString('ru-RU') + ` (${lf.years || 1} г.)` : '—');
-            const title = isBase ? 'Первичная постоянная лицензия (10 вечных мест + ИИ-агенты)' : `Временная лицензия (+${lf.seats} конк. мест · ${String(lf.tier || '').toUpperCase()})`;
-            return `<div style="display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);align-items:center;">
-                <div><b>${esc(title)}</b><br><code style="font-size:11.5px;color:var(--muted)">${esc(f.fileName || lf.fileId)}</code></div>
-                <div style="text-align:right"><span class="pill" style="padding:3px 10px;font-size:11.5px">${esc(expText)}</span></div>
+
+        const now = Date.now();
+        box.innerHTML = activeList.map(f => {
+            const rid = f.reservationId;
+            const depositRub = Number(f.nonRefundableDepositRub || 100_000);
+            const totalFeeRub = Number(f.franchiseFeeRub || 500_000);
+            const totalPaidRub = Number(f.totalPaidRub ?? (f.depositPaid ? depositRub : 0));
+            const remainingRub = Number(f.remainingFranchiseFeeRub ?? Math.max(0, totalFeeRub - totalPaidRub));
+            const schedule = Array.isArray(f.paymentSchedule) ? f.paymentSchedule : [];
+            const paidMonths = Number(f.paidMonthsCount ?? schedule.filter(x => x.status === 'paid').length);
+            const pct = totalFeeRub > 0 ? Math.min(100, Math.round((totalPaidRub / totalFeeRub) * 100)) : 0;
+
+            const deadline = Number(f.depositDeadlineAt || ((f.createdAt || now) + 15 * 60_000));
+            const remSec = Math.max(0, Math.floor((deadline - now) / 1000));
+
+            const statusBadge = !f.depositPaid
+                ? `<span class="tag" style="background:rgba(245,158,11,.18);color:var(--warn)">Оплата залога: <b data-deposit-deadline="${deadline}">${fmtCountdown(remSec)}</b></span>`
+                : (remainingRub <= 0
+                    ? `<span class="tag ok">✓ Погашена полностью (12/12)</span>`
+                    : `<span class="tag ok">✓ Залог оплачен · График ${paidMonths}/12 мес.</span>`);
+
+            const depositAlertHtml = !f.depositPaid
+                ? `<div style="margin-top:10px;padding:12px 14px;border-radius:10px;border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.08);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
+                    <div class="small">
+                        <b>Оплатите начальный взнос (${rub(depositRub)}) через ЮKassa в течение <span style="font-family:monospace;font-size:13.5px" data-deposit-deadline="${deadline}">${fmtCountdown(remSec)}</span></b>, иначе резерв автоматически отменится.
+                    </div>
+                    <div style="display:flex;gap:6px;flex-wrap:wrap">
+                        <button class="btn btn-primary btn-sm" style="padding:6px 12px;font-size:12px" data-pay-order="${esc(f.orderId)}" data-pay-method="yookassa">Оплатить ${rub(depositRub)} (ЮKassa)</button>
+                        <button class="btn btn-ghost btn-sm" style="padding:6px 10px;font-size:12px;color:var(--danger)" data-cancel-franchise="${esc(rid)}">Отменить резерв</button>
+                    </div>
+                   </div>`
+                : '';
+
+            const nextInst = f.nextInstallment || schedule.find(x => x.status !== 'paid');
+            const scheduleControlsHtml = (f.depositPaid && remainingRub > 0)
+                ? `<div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">
+                    ${nextInst ? `<button class="btn btn-primary btn-sm" style="padding:5px 10px;font-size:12px" data-pay-installment="${esc(rid)}" data-month="${nextInst.monthNumber}">Оплатить месяц №${nextInst.monthNumber} (${rub(nextInst.amountRub)})</button>` : ''}
+                    <button class="btn btn-ghost btn-sm" style="padding:5px 10px;font-size:12px" data-pay-installment="${esc(rid)}" data-early="1">Погасить досрочно (${rub(remainingRub)})</button>
+                   </div>`
+                : '';
+
+            const scheduleRowsHtml = schedule.map(inst => {
+                const isPaid = inst.status === 'paid';
+                const dueStr = inst.dueDate ? new Date(inst.dueDate).toLocaleDateString('ru-RU') : '—';
+                const paidStr = inst.paidAt ? new Date(inst.paidAt).toLocaleDateString('ru-RU') : '';
+                let stHtml = '<span class="tag">По графику</span>';
+                if (isPaid) {
+                    stHtml = `<span class="tag ok">✓ Оплачен${paidStr ? ' ' + esc(paidStr) : ''}</span>`;
+                }
+                else if (inst.displayStatus === 'overdue') {
+                    stHtml = '<span class="tag bad">Просрочен</span>';
+                }
+                else if (inst.displayStatus === 'next') {
+                    stHtml = '<span class="tag" style="color:var(--brand-2)">К оплате</span>';
+                }
+
+                const actHtml = (!isPaid && f.depositPaid)
+                    ? `<div style="display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap">
+                        <button class="btn btn-primary btn-sm" style="padding:4px 10px;font-size:12px" data-pay-installment="${esc(rid)}" data-month="${inst.monthNumber}" data-pay-method="yookassa">ЮKassa</button>
+                        <button class="btn btn-ghost btn-sm" style="padding:4px 10px;font-size:12px" data-pay-installment="${esc(rid)}" data-month="${inst.monthNumber}" data-pay-method="invoice">Счёт</button>
+                       </div>`
+                    : (isPaid ? `<span class="small muted">Закрыт</span>` : `<span class="small muted">После залога</span>`);
+
+                return `<tr>
+                    <td><b>Месяц ${inst.monthNumber} / 12</b></td>
+                    <td>${esc(dueStr)}</td>
+                    <td><b>${rub(inst.amountRub)}</b></td>
+                    <td>${stHtml}</td>
+                    <td style="text-align:right">${actHtml}</td>
+                </tr>`;
+            }).join('');
+
+            return `<div class="sec-item">
+                <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
+                    <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
+                        <b style="font-size:15px">${esc(f.regionName)}</b>
+                        <span class="small muted">· ${esc(f.district || f.regionCode)} · <code>${esc(rid)}</code></span>
+                        ${statusBadge}
+                    </div>
+                    ${scheduleControlsHtml}
+                </div>
+                <div class="small muted" style="margin-top:4px">
+                    Паушальный взнос: <b>${rub(totalFeeRub)}</b> · Залог: <b>${rub(depositRub)}</b> · Оплачено: <b>${rub(totalPaidRub)}</b> (${pct}%) · Остаток: <b>${rub(remainingRub)}</b>
+                </div>
+                ${depositAlertHtml}
+                <table class="sec-table" style="margin-top:10px">
+                    <thead><tr>
+                        <th>Период</th>
+                        <th>Дата платежа</th>
+                        <th>Сумма</th>
+                        <th>Статус</th>
+                        <th style="text-align:right">Оплата</th>
+                    </tr></thead>
+                    <tbody>${scheduleRowsHtml}</tbody>
+                </table>
             </div>`;
         }).join('');
-        const resRows = reservations.map(r => `<div style="display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);align-items:center;">
-            <div><b>Региональная франшиза: ${esc(r.regionName)}</b><br><code style="font-size:11.5px;color:var(--muted)">${esc(r.reservationId)}</code></div>
-            <div style="text-align:right"><span class="pill" style="padding:3px 10px;font-size:11.5px">Залог оплачен</span></div>
-        </div>`).join('');
-        box.innerHTML = (files.length ? `<div>Всего доступно одновременных сессий: <b style="color:var(--text)">${lic.totalSeats}</b> (${lic.baseSeats} вечных + ${lic.addonSeats} временных)</div>` : '') + rows + resRows;
+
+        startFranchiseCountdowns();
     }
 
     async function refreshCabinetUser() {
@@ -394,14 +639,176 @@
         catch { /* ignore */ }
     }
 
-    function copyCabinetToken() {
-        const val = $('#inpCabinetHubToken')?.value || '';
+    async function createCabinetServer() {
+        if (!isUserReadyForOrders()) {
+            requireAuthAndOferta(() => createCabinetServer());
+            return;
+        }
+        const inp = $('#inpNewServerName');
+        const serverName = inp?.value.trim() || '';
+        try {
+            const res = await api('/api/cabinet/servers/create', {
+                sessionKey: currentUser?.sessionKey || '',
+                serverName,
+            });
+            if (inp) inp.value = '';
+            if (res.user) {
+                currentUser = { ...res.user, sessionKey: currentUser.sessionKey };
+                onAuthenticated();
+            }
+        }
+        catch (err) {
+            alert(err.message);
+        }
+    }
+
+    async function renameCabinetServer(licenseId, currentName = '') {
+        const nextName = prompt('Введите новое название для сервера WORK:', currentName || '');
+        if (!nextName || nextName.trim() === currentName) return;
+        try {
+            const res = await api('/api/cabinet/servers/rename', {
+                sessionKey: currentUser?.sessionKey || '',
+                licenseId,
+                serverName: nextName.trim(),
+            });
+            if (res.user) {
+                currentUser = { ...res.user, sessionKey: currentUser.sessionKey };
+                onAuthenticated();
+            }
+        }
+        catch (err) {
+            alert(err.message);
+        }
+    }
+
+    async function deleteCabinetServer(licenseId) {
+        if (!confirm('Удалить этот неактивированный сервер из вашего реестра?')) return;
+        try {
+            const res = await api('/api/cabinet/servers/delete', {
+                sessionKey: currentUser?.sessionKey || '',
+                licenseId,
+            });
+            if (res.user) {
+                currentUser = { ...res.user, sessionKey: currentUser.sessionKey };
+                onAuthenticated();
+            }
+        }
+        catch (err) {
+            alert(err.message);
+        }
+    }
+
+    function copyServerToken(licenseId) {
+        const inp = $(`#srvTok-${licenseId}`);
+        const val = inp?.value || '';
         if (!val) return;
         navigator.clipboard?.writeText(val);
-        const st = $('#tokenCopyStatus');
+        const st = $(`#srvTokStatus-${licenseId}`);
         if (st) {
-            st.textContent = 'Токен скопирован в буфер обмена! Вставьте его в локальном WORK → Лицензия.';
-            setTimeout(() => { if (st.textContent.includes('скопирован')) st.textContent = ''; }, 5000);
+            st.textContent = '✓ Токен сервера скопирован в буфер обмена!';
+            setTimeout(() => { if (st.textContent.includes('скопирован')) st.textContent = ''; }, 4000);
+        }
+    }
+
+    async function regenerateServerToken(licenseId) {
+        if (!currentUser?.sessionKey) return;
+        try {
+            const res = await api('/api/cabinet/token', {
+                sessionKey: currentUser.sessionKey,
+                licenseId,
+            });
+            if (res.user) {
+                currentUser = { ...res.user, sessionKey: currentUser.sessionKey };
+                onAuthenticated();
+            }
+            const st = $(`#srvTokStatus-${licenseId}`);
+            if (st) st.textContent = '✓ Выпущен новый токен для этого сервера.';
+        }
+        catch (err) {
+            alert(err.message);
+        }
+    }
+
+    function downloadServerLicFile(licenseId, fileIdx) {
+        const srv = getUserServersList().find(s => s.licenseId === licenseId);
+        const f = srv?.licenseFiles?.[Number(fileIdx)];
+        if (!f) return;
+        const json = JSON.stringify(f.licenseFile || f, null, 2);
+        const blob = new Blob([json], { type: 'application/json;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = f.fileName || `${licenseId}.lic.json`;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+    }
+
+    async function buyForSpecificServer(licenseId, variant = 'license_only') {
+        if (variant === 'addons_only') {
+            $$('#segPakVariant button').forEach(b => b.classList.toggle('on', b.dataset.variant === 'addons_only'));
+            syncClientSeats(5);
+            syncClientServerPicker(licenseId);
+            switchStage('clients');
+            return;
+        }
+        try {
+            const data = await api('/api/cabinet/orders/draft', {
+                sessionKey: currentUser?.sessionKey || '',
+                licenseId,
+                includeBasePak: variant === 'pak',
+                includeBaseLicenseOnly: variant === 'license_only',
+                tier: 'enterprise',
+                addonSeats: 0,
+                years: 1,
+            });
+            if (data.user) {
+                currentUser = { ...data.user, sessionKey: currentUser.sessionKey };
+                onAuthenticated();
+            }
+        }
+        catch (err) {
+            alert(err.message);
+        }
+    }
+
+    async function payFranchiseInstallment(reservationId, { monthNumber = null, earlyPayoff = false, paymentMethod = 'yookassa' } = {}) {
+        try {
+            const data = await api('/api/cabinet/franchises/pay-installment', {
+                sessionKey: currentUser?.sessionKey || '',
+                reservationId,
+                monthNumber: monthNumber != null ? Number(monthNumber) : null,
+                earlyPayoff: Boolean(earlyPayoff),
+                paymentMethod,
+            });
+            if (data.user) {
+                currentUser = { ...data.user, sessionKey: currentUser.sessionKey };
+                onAuthenticated();
+            }
+            const url = data.invoiceUrl || data.confirmationUrl;
+            if (url) window.open(url, '_blank', 'noopener');
+        }
+        catch (err) {
+            alert(err.message);
+        }
+    }
+
+    async function cancelFranchiseByUser(reservationId) {
+        if (!confirm('Отменить резерв этой региональной франшизы?')) return;
+        try {
+            const data = await api('/api/cabinet/franchises/cancel', {
+                sessionKey: currentUser?.sessionKey || '',
+                reservationId,
+            });
+            if (data.user) {
+                currentUser = { ...data.user, sessionKey: currentUser.sessionKey };
+                onAuthenticated();
+            }
+            refreshCatalogRegions();
+        }
+        catch (err) {
+            alert(err.message);
         }
     }
 
@@ -493,8 +900,11 @@
         const st = $('#pakOrderStatus');
         if (st) st.textContent = 'Добавляем заказ в ваш Личный кабинет…';
         try {
+            const pickedLicId = $('#selClientTargetServer')?.value || '';
             const data = await api('/api/cabinet/orders/draft', {
                 sessionKey: currentUser?.sessionKey || '',
+                licenseId: pickedLicId,
+                createNewServer: pickedLicId === 'NEW',
                 includeBasePak,
                 includeBaseLicenseOnly,
                 tier,
@@ -506,6 +916,7 @@
                 onAuthenticated();
             }
             if (st) st.textContent = '';
+            switchCabinetTab('servers');
             switchStage('addons');
         }
         catch (err) {
@@ -976,6 +1387,7 @@
             }
             if (msg) msg.textContent = '';
             refreshCatalogRegions();
+            switchCabinetTab('franchises');
             switchStage('addons');
         }
         catch (err) {
@@ -1236,8 +1648,9 @@
     /* ================= Привязка событий ================= */
     function bind() {
         document.addEventListener('click', (e) => {
-            const el = e.target.closest('[data-stage],[data-action],[data-reserve],[data-pay-order],[data-invoice-toggle],[data-cancel-order],[data-ask],[data-district],th[data-sort],#regionsTableBody tr');
+            const el = e.target.closest('[data-stage],[data-cab-tab],[data-action],[data-reserve],[data-pay-order],[data-invoice-toggle],[data-cancel-order],[data-copy-server-token],[data-regen-server-token],[data-rename-server],[data-delete-server],[data-download-lic],[data-buy-for-server],[data-pay-installment],[data-cancel-franchise],[data-ask],[data-district],th[data-sort],#regionsTableBody tr');
             if (!el) return;
+            if (el.matches('[data-cab-tab]')) { e.preventDefault(); switchCabinetTab(el.dataset.cabTab); return; }
             if (el.matches('[data-reserve]')) { e.stopPropagation(); reserveRegionFranchise(el.dataset.reserve); return; }
             if (el.matches('[data-pay-order]')) { e.stopPropagation(); payCabinetOrder(el.dataset.payOrder, el.dataset.payMethod || 'yookassa'); return; }
             if (el.matches('[data-invoice-toggle]')) {
@@ -1247,6 +1660,22 @@
                 return;
             }
             if (el.matches('[data-cancel-order]')) { e.stopPropagation(); cancelCabinetOrder(el.dataset.cancelOrder); return; }
+            if (el.matches('[data-copy-server-token]')) { e.stopPropagation(); copyServerToken(el.dataset.copyServerToken); return; }
+            if (el.matches('[data-regen-server-token]')) { e.stopPropagation(); regenerateServerToken(el.dataset.regenServerToken); return; }
+            if (el.matches('[data-rename-server]')) { e.stopPropagation(); renameCabinetServer(el.dataset.renameServer, el.dataset.currentName || ''); return; }
+            if (el.matches('[data-delete-server]')) { e.stopPropagation(); deleteCabinetServer(el.dataset.deleteServer); return; }
+            if (el.matches('[data-download-lic]')) { e.stopPropagation(); downloadServerLicFile(el.dataset.downloadLic, el.dataset.fileIdx || 0); return; }
+            if (el.matches('[data-buy-for-server]')) { e.stopPropagation(); buyForSpecificServer(el.dataset.buyForServer, el.dataset.buyVariant || 'license_only'); return; }
+            if (el.matches('[data-pay-installment]')) {
+                e.stopPropagation();
+                payFranchiseInstallment(el.dataset.payInstallment, {
+                    monthNumber: el.dataset.month ? Number(el.dataset.month) : null,
+                    earlyPayoff: el.dataset.early === '1',
+                    paymentMethod: el.dataset.payMethod || 'yookassa',
+                });
+                return;
+            }
+            if (el.matches('[data-cancel-franchise]')) { e.stopPropagation(); cancelFranchiseByUser(el.dataset.cancelFranchise); return; }
             if (el.matches('#regionsTableBody tr')) { selectRegion(el.dataset.code, { zoom: true }); $('#mapBox').scrollIntoView({ block: 'nearest', behavior: 'smooth' }); return; }
             if (el.matches('th[data-sort]')) {
                 SORT.dir = SORT.key === el.dataset.sort ? -SORT.dir : (el.dataset.sort === 'name' || el.dataset.sort === 'district' ? 1 : -1);
@@ -1291,11 +1720,12 @@
                         $$('#segPakVariant button').forEach(b => b.classList.toggle('on', b.dataset.variant === 'addons_only'));
                     }
                     syncClientSeats(5);
+                    syncClientServerPicker();
                     buyClientConfig();
                     break;
                 case 'buy-client-config': buyClientConfig(); break;
+                case 'create-server': createCabinetServer(); break;
                 case 'gen-hub-token': generateCabinetToken(); break;
-                case 'copy-hub-token': copyCabinetToken(); break;
                 case 'refresh-cabinet': refreshCabinetUser(); break;
                 case 'reserve-selected': reserveRegionFranchise(selectedCode); break;
                 case 'cert-close': $('#certModal')?.classList.remove('open'); break;
@@ -1325,7 +1755,10 @@
         $('#rngPartnerSales')?.addEventListener('input', recalcPartner);
         $('#inpRegionFilter')?.addEventListener('input', renderRegionsTable);
         bindSeg('segPakTier', recalcBaseOrder);
-        bindSeg('segPakVariant', () => syncClientSeats($('#inpPakExtraSeatsNum')?.value || 0));
+        bindSeg('segPakVariant', () => {
+            syncClientSeats($('#inpPakExtraSeatsNum')?.value || 0);
+            syncClientServerPicker();
+        });
         window.addEventListener('message', (e) => {
             if (e.data?.type === 'odant:order-paid') {
                 refreshCabinetUser();