// ============================================================================
// ЗАЯВКИ v2 — фінальна сторінка (на базі варіанта 2: KPI-картки = вкладки)
// LsLeadsModule — вміст модуля (вбудовується в основний CRM)
// LsFinalPage — самостійна сторінка з сайдбаром і топбаром
// 4 вкладки звернень клієнтів + 2 внутрішні: Документи, Питання менеджерів
// ============================================================================
const { useState: lsfUseState } = React;
function LsCardTab({ t, active, count, alert, alertLabel, onClick }) {
return (
{t.label}
{count}
0 ? "#FCA5A5" : "var(--fg-muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
{alert > 0 &&
);
}
function LsGroupLabel({ children }) {
return (
{children}
);
}
// ── Воронка товарних заявок: створено → в роботі → в заказ / втрачено ───────
// + перемикач Активні/Архів і розбивка по менеджерах (контроль: хто скільки втрачає).
const LS_TERMINAL = new Set(["converted", "lost", "closed", "done"]);
function LsFunnelStat({ label, value, color, sub }) {
return (
{label}
{value}{sub && {sub} }
);
}
// Стан активності дзвінків для заявки (через спільний lsCallActivity).
function lsLeadCallState(l) { const a = (typeof lsCallActivity === "function") ? lsCallActivity(l.phone, l.createdAt) : null; return a ? a.state : "none"; }
function LsLeadFunnel({ leads, archive, onToggleArchive, callFilter, onCallFilter, statusFilter, onStatusFilter, compact }) {
const [byMgr, setByMgr] = lsfUseState(false);
const [openFilters, setOpenFilters] = lsfUseState(false); // compact: фільтри/статистика сховані за тапом
const inWork = leads.filter(l => !LS_TERMINAL.has(l.status)).length;
const conv = leads.filter(l => l.status === "converted").length;
const lost = leads.filter(l => l.status === "lost").length;
const denom = conv + lost;
const pct = denom ? Math.round((conv / denom) * 100) : 0;
// «не передзвонили» — рахуємо по АКТИВНИХ (відкритих) заявках: клієнт дзвонив, менеджер не передзвонив
const missed = leads.filter(l => !LS_TERMINAL.has(l.status) && lsLeadCallState(l) === "missed").length;
const mgr = {};
leads.forEach(l => {
const m = l.manager || "— без менеджера";
const o = mgr[m] || (mgr[m] = { total: 0, conv: 0, lost: 0, work: 0, missed: 0 });
o.total++;
if (l.status === "converted") o.conv++;
else if (l.status === "lost") o.lost++;
else if (!LS_TERMINAL.has(l.status)) { o.work++; if (lsLeadCallState(l) === "missed") o.missed++; }
});
const mgrs = Object.entries(mgr).sort((a, b) => b[1].lost - a[1].lost || b[1].total - a[1].total);
// база для лічильників фільтрів = поточний scope (активні / архів)
const scope = leads.filter(l => archive ? LS_TERMINAL.has(l.status) : !LS_TERMINAL.has(l.status));
const callCounts = { all: scope.length, missed: 0, ok: 0, none: 0 };
scope.forEach(l => { const s = lsLeadCallState(l); if (s === "missed") callCounts.missed++; else if (s === "ok") callCounts.ok++; else if (s === "none") callCounts.none++; });
const callChips = [
{ k: "all", label: "Усі дзвінки", color: "var(--fg-secondary)" },
{ k: "missed", label: "❗ не передзвонили", color: "#EF4444" },
{ k: "ok", label: "📲 передзвонили", color: "#10B981" },
{ k: "none", label: "немає дзвінків", color: "var(--fg-muted)" },
];
const stChips = [{ k: "all", label: "Усі" }, ...Object.entries(LS_PRODUCT_STATUSES).map(([k, v]) => ({ k, label: v.label, dot: v.dot }))]
.filter(c => c.k === "all" || scope.some(l => l.status === c.k));
const seg = (val, label) => (
onToggleArchive(val)} style={{
height: 26, padding: "0 12px", border: 0, borderRadius: 6, cursor: "pointer", fontFamily: "inherit", fontSize: 12, fontWeight: 500,
background: archive === val ? "var(--accent)" : "transparent", color: archive === val ? "#fff" : "var(--fg-secondary)",
}}>{label}
);
const chipBtn = (active, label, color, count, onClick, dot) => (
{dot && {count} }
);
// ── Компактний (мобільний) режим: вузька стрічка цифр, що горизонтально
// скролиться, + кнопка «фільтри», за якою ховаються чипи/сегменти/по менеджерах.
// Сам блок у mobile.jsx винесено в зону скролу, тож він зʼїжджає при прогортанні
// і не зʼїдає екран зі списком заявок.
if (compact) {
const cstat = (label, value, color, sub) => (
{label}
{value}{sub && {sub} }
);
const activeFilters = (callFilter && callFilter !== "all") || (archive && statusFilter && statusFilter !== "all") || archive;
return (
{cstat("Усього", leads.length)}
{cstat("В роботі", inWork, inWork > 0 ? "#F59E0B" : null)}
{cstat("В заказ", conv, "#10B981", denom ? pct + "%" : null)}
{cstat("Втрач.", lost, lost > 0 ? "#EF4444" : null)}
{cstat("Не передзв.", missed, missed > 0 ? "#EF4444" : null)}
setOpenFilters(v => !v)} style={{
marginLeft: "auto", flexShrink: 0, height: 30, padding: "0 10px", borderRadius: 8, cursor: "pointer", fontFamily: "inherit",
fontSize: 11.5, fontWeight: 600, border: "1px solid " + (activeFilters || openFilters ? "var(--accent-ring)" : "var(--border-default)"),
background: activeFilters || openFilters ? "var(--accent-soft)" : "var(--bg-raised)", color: "var(--fg-secondary)",
display: "inline-flex", alignItems: "center", gap: 5, marginRight: 6,
}}>{activeFilters ? "•" : ""}
{openFilters && (
{seg(false, "Активні")}
{seg(true, "Архів")}
{callChips.map(c => chipBtn(callFilter === c.k, c.label, c.color, callCounts[c.k], () => onCallFilter(callFilter === c.k ? "all" : c.k)))}
{archive && stChips.map(c => chipBtn(statusFilter === c.k, c.label, null, null, () => onStatusFilter(statusFilter === c.k ? "all" : c.k), c.dot))}
setByMgr(v => !v)} style={{
height: 30, padding: "0 11px", borderRadius: 7, cursor: "pointer", fontFamily: "inherit", fontSize: 12, fontWeight: 500,
border: "1px solid var(--border-default)", background: byMgr ? "var(--accent-soft)" : "var(--bg-raised)", color: "var(--fg-secondary)",
display: "inline-flex", alignItems: "center", gap: 6, alignSelf: "flex-start",
}}>по менеджерах
{byMgr && (
{mgrs.map(([name, o]) => (
{name}
усього {o.total}
в роб. {o.work}
{o.missed > 0 && не передзв. {o.missed} }
заказ {o.conv}
0 ? "#EF4444" : "var(--fg-muted)", fontWeight: o.lost > 0 ? 600 : 400 }}>втрач. {o.lost}
))}
)}
)}
);
}
return (
0 ? "#F59E0B" : "var(--fg-primary)"}/>
0 ? "#EF4444" : "var(--fg-primary)"}/>
0 ? "#EF4444" : "var(--fg-primary)"}/>
setByMgr(v => !v)} style={{
height: 28, padding: "0 11px", borderRadius: 7, cursor: "pointer", fontFamily: "inherit", fontSize: 12, fontWeight: 500,
border: "1px solid var(--border-default)", background: byMgr ? "var(--accent-soft)" : "var(--bg-raised)", color: "var(--fg-secondary)", marginRight: 8,
display: "inline-flex", alignItems: "center", gap: 6,
}}>по менеджерах
{seg(false, "Активні")}
{seg(true, "Архів")}
{/* Фільтри: по активності дзвінків (завжди) + по статусу (в архіві) */}
{callChips.map(c => chipBtn(callFilter === c.k, c.label, c.color, callCounts[c.k], () => onCallFilter(callFilter === c.k ? "all" : c.k)))}
{archive && stChips.length > 1 &&
{byMgr && (
{mgrs.map(([name, o]) => (
{name}
усього {o.total}
в роботі {o.work}
{o.missed > 0 && не передзв. {o.missed} }
в заказ {o.conv}
0 ? "#EF4444" : "var(--fg-muted)", fontWeight: o.lost > 0 ? 600 : 400, whiteSpace: "nowrap" }}>втрачено {o.lost}
))}
)}
);
}
// ── Модуль (без сайдбара/топбара — вбудовується в основний CRM) ────────────
// Термінальні («в архів») статуси для гарантій і документів.
const LS_WARR_DONE = new Set(["done", "closed"]);
const LS_DOC_DONE = new Set(["sent"]);
// Перемикач Активні / Архів для вкладок гарантій і документів (виконані/надіслані ховаємо
// в архів, щоб не займали місце, але одним кліком доступні).
function LsArchiveToggle({ archive, onToggle, activeN, archiveN }) {
const btn = (on, label, n) => (
onToggle(on)} style={{
height: 30, padding: "0 13px", borderRadius: 8, fontFamily: "inherit", fontSize: 12.5, fontWeight: 500, cursor: "pointer",
display: "inline-flex", alignItems: "center", gap: 7,
background: archive === on ? "var(--accent-soft)" : "var(--bg-raised)",
color: archive === on ? "#C7D2FE" : "var(--fg-secondary)",
border: "1px solid " + (archive === on ? "var(--accent-ring)" : "var(--border-default)"),
}}>
{label}
{n}
);
return (
{btn(false, "Активні", activeN)}
{btn(true, "Архів", archiveN)}
);
}
function LsLeadsModule({ initialTab = "product", userName, userRole, openLeadId, onConsumeOpenLead }) {
const [tab, setTab] = lsfUseState(initialTab);
const [records, setRecords] = lsfUseState([]);
const [loading, setLoading] = lsfUseState(true);
const [managers, setManagers] = lsfUseState([]);
const [mgrFilter, setMgrFilter] = lsfUseState("all"); // фільтр по менеджеру (лише owner)
const [docModal, setDocModal] = lsfUseState(false);
const [newModal, setNewModal] = lsfUseState(false);
const [editing, setEditing] = lsfUseState(null);
const [selProduct, setSelProduct] = lsfUseState(null);
const [prodArchive, setProdArchive] = lsfUseState(false); // вкладка product: Активні / Архів
const [warrArchive, setWarrArchive] = lsfUseState(false); // вкладка warranty: Активні / Архів
const [docsArchive, setDocsArchive] = lsfUseState(false); // вкладка docs: Активні / Архів
const [prodCallFilter, setProdCallFilter] = lsfUseState("all"); // all|missed|ok|none
const [prodStatusFilter, setProdStatusFilter] = lsfUseState("all"); // фільтр статусу (в архіві)
const [, setCallsTick] = lsfUseState(0); // ре-рендер коли підтягнулись дзвінки (бейджі активності)
const [refreshing, setRefreshing] = lsfUseState(false);
const reload = () => lsApi.list().then(rs => { setRecords(rs); setLoading(false); }).catch(e => { console.warn("заявки:", e.message); setLoading(false); });
// Ручне оновлення: нові заявки/статуси + менеджери + дзвінки, без перезапуску PWA.
const refreshAll = () => {
setRefreshing(true);
const pCalls = (window.API && window.API.get)
? window.API.get("/api/calls/recent?days=60").then(d => { if (d && d.calls) { window._crmCalls = { data: d.calls, ts: Date.now() }; setCallsTick(t => t + 1); } }).catch(() => {})
: Promise.resolve();
Promise.all([
lsApi.list().then(rs => setRecords(rs)).catch(() => {}),
lsApi.managers().then(setManagers).catch(() => {}),
pCalls,
]).finally(() => setRefreshing(false));
};
React.useEffect(() => {
reload(); lsApi.managers().then(setManagers);
// дзвінки для бейджів/фільтрів активності — з персистентної БД (історія > 7 днів),
// фолбек на живий кеш Ringostat якщо БД ще порожня
const setCalls = arr => { window._crmCalls = { data: arr || [], ts: Date.now() }; setCallsTick(t => t + 1); };
if (window.API && window.API.get) {
window.API.get("/api/calls/recent?days=60")
.then(d => { if (d && d.calls && d.calls.length) setCalls(d.calls); else if (window.API.getCalls) return window.API.getCalls().then(x => setCalls(x.calls)); })
.catch(() => { if (window.API.getCalls) window.API.getCalls().then(x => setCalls(x.calls)).catch(() => {}); });
}
}, []);
// Глибоке відкриття заявки з дошки «Що зробити» (App → openLeadId): щойно записи
// завантажились — знаходимо заявку, перемикаємо на її вкладку й відкриваємо картку.
React.useEffect(() => {
if (openLeadId == null || !records.length) return;
const rec = records.find(r => Number(r.id) === Number(openLeadId));
if (rec) {
setTab(rec.type || "product");
if ((rec.type || "product") === "product") { setProdArchive(LS_TERMINAL.has(rec.status)); setSelProduct(rec); }
else setEditing(rec);
}
if (onConsumeOpenLead) onConsumeOpenLead();
}, [openLeadId, records]);
// Розмежування доступу: менеджер бачить ЛИШЕ свої заявки; керівник (owner) — усі,
// з опційним фільтром по конкретному менеджеру.
const isOwner = userRole === "owner";
const sameMgr = (l) => String(l.manager || "").trim().toLowerCase() === String(userName || "").trim().toLowerCase();
const scopedRecords = !isOwner
? records.filter(sameMgr)
: (mgrFilter === "all" ? records : records.filter(l => String(l.manager || "") === mgrFilter));
const byType = (t) => scopedRecords.filter(r => r.type === t);
const products = byType("product"), warranty = byType("warranty"), returns = byType("return");
// вкладка product: показуємо або активні, або архів (термінальні) — щоб активні не засмічувались
let productsView = products.filter(l => prodArchive ? LS_TERMINAL.has(l.status) : !LS_TERMINAL.has(l.status));
if (prodArchive && prodStatusFilter !== "all") productsView = productsView.filter(l => l.status === prodStatusFilter);
if (prodCallFilter !== "all") productsView = productsView.filter(l => lsLeadCallState(l) === prodCallFilter);
const questions = byType("question"), docs = byType("docs"), mgrq = byType("mgrq");
// Гарантії/документи: Активні (не термінальні) або Архів (виконані/надіслані).
const warrantyView = warranty.filter(l => warrArchive ? LS_WARR_DONE.has(l.status) : !LS_WARR_DONE.has(l.status));
const docsView = docs.filter(l => docsArchive ? LS_DOC_DONE.has(l.status) : !LS_DOC_DONE.has(l.status));
const docsPending = docs.filter(d => d.status === "pending").length;
const mgrqOpen = mgrq.filter(q => q.status === "open").length;
const STATUS_MAPS = { product: LS_PRODUCT_STATUSES, warranty: LS_WARRANTY_STATUSES, return: LS_RETURN_STATUSES, question: LS_QUESTION_STATUSES, docs: LS_DOC_STATUSES, mgrq: LS_MGRQ_STATUSES };
const statusLabel = (type, key) => { const m = STATUS_MAPS[type]; return m && m[key] ? m[key].label : key; };
const ev = (a) => ({ a, u: userName || "" });
const sendDoc = (id) => lsApi.update(id, { status: "sent", __event: ev("Статус → Надіслано") }).then(reload);
const answerMgr = (id, reply) => lsApi.update(id, { status: "answered", reply, replyBy: userName || "Ви", __event: ev("Відповідь менеджеру") }).then(reload);
// дії над будь-якою заявкою
const changeStatus = (id, status) => {
const cur = records.find(r => r.id === id);
const patch = { status, __event: ev("Статус → " + statusLabel(cur ? cur.type : "", status)) };
if (status === "in_sc" && !(cur && cur.inScDate)) patch.inScDate = Date.now(); // старт 14-денного відліку
return lsApi.update(id, patch).then(reload);
};
const removeLead = (id) => lsApi.remove(id).then(() => { setEditing(null); reload(); });
// Кілька файлів: ллємо послідовно; перший fileId зберігаємо в data (легасі-поле для чипа в столі)
const uploadAllFiles = async (id, files) => {
let firstId = null;
for (const file of files || []) {
try {
const up = await lsApi.uploadFile(id, file);
if (up && up.fileId && firstId == null) firstId = up.fileId;
} catch (e) { console.warn("файл «" + file.name + "»:", e.message); }
}
return firstId;
};
const fileMeta = (rest, files) => {
if (!files.length) return;
rest.fileName = files[0].name + (files.length > 1 ? " +" + (files.length - 1) : "");
rest.fileSize = files[0].sizeLabel;
};
const editLead = (id, patch) => {
const { _file, _files, ageMin, ts, updatedStr, history, ...rest } = patch; // не писати службові/файли/історію у data
const files = (_files && _files.length) ? _files : (_file ? [_file] : []);
fileMeta(rest, files);
rest.__event = ev("Відредаговано");
return lsApi.update(id, rest)
.then(() => uploadAllFiles(id, files))
.then(fid => (fid ? lsApi.update(id, { fileId: fid }) : null))
.then(() => { setEditing(null); reload(); })
.catch(e => console.warn("редагування:", e.message));
};
// Документ: створити запис → завантажити файли (якщо є) → зберегти fileId.
const addDoc = (d) => {
const { _file, _files, ...rest } = d;
const files = (_files && _files.length) ? _files : (_file ? [_file] : []);
const body = { type: "docs", status: rest.status || "pending", source: "crm", manager: rest.manager || userName || "", _user: userName, _action: "Створено документ", ...rest };
fileMeta(body, files);
return lsApi.create(body)
.then(res => (files.length && res && res.id)
? uploadAllFiles(res.id, files).then(fid => (fid ? lsApi.update(res.id, { fileId: fid }) : null))
: null)
.then(() => { setTab("docs"); reload(); })
.catch(e => console.warn("документ:", e.message));
};
// «Нова заявка» — створює на бекенді й перемикає на вкладку типу.
// Файли (фото гарантії тощо) заливаються ПІСЛЯ створення — як у документах.
const createLead = (type, f) => {
if (type === "docs") return addDoc(f);
const files = (f._files && f._files.length) ? f._files : (f._file ? [f._file] : []);
const body = { type, source: f.source || "call", client: f.client || "Без імені", phone: f.phone || "", manager: f.manager || userName || "", _user: userName, _action: "Створено заявку" };
if (type === "product") Object.assign(body, { status: "new", product: f.product || "", bot: "awaiting", note: f.note || "", price: f.sitePrice != null ? f.sitePrice : null, sitePresence: f.sitePresence || "" });
if (type === "warranty") Object.assign(body, { status: "new", product: f.product || "", serial: f.serial || "", problem: f.problem || "", docId: f.docId || "", ttn: f.ttn || "", orderId: parseInt(f.orderId, 10) || null });
if (type === "return") Object.assign(body, { status: "review", product: f.product || "", reason: f.reason || "", purchased: f.purchased || "", day: 1, refund: parseInt(f.refund, 10) || 0, complete: true });
if (type === "question") Object.assign(body, { status: "open", question: f.question || "" });
if (type === "mgrq") Object.assign(body, { status: "open", question: f.question || "", orderId: parseInt(f.orderId, 10) || null });
fileMeta(body, files);
// Гарантія з фото: відкладаємо пост у топік — ПЕРШЕ фото стане основним
// повідомленням (фото з підписом-заявкою), а не окремим текстом
const defer = type === "warranty" && files.length > 0;
if (defer) body._deferTopic = true;
lsApi.create(body)
.then(res => {
if (!(files.length && res && res.id)) return null;
return uploadAllFiles(res.id, files)
// страховка: якщо фото не залилось — пустий PUT створить текстове повідомлення
.then(() => (defer ? lsApi.update(res.id, {}) : null));
})
.then(() => { setTab(type); reload(); })
.catch(e => console.warn("створення заявки:", e.message));
};
const defs = {
product: { search: "Пошук: товар, клієнт, телефон…", statuses: LS_PRODUCT_STATUSES, data: productsView },
warranty: { search: "Пошук: товар, серійний номер…", statuses: LS_WARRANTY_STATUSES, data: warranty },
return: { search: "Пошук: товар, клієнт…", statuses: LS_RETURN_STATUSES, data: returns },
question: { search: "Пошук у питаннях…", statuses: LS_QUESTION_STATUSES, data: questions },
docs: { search: "Пошук: документ, замовлення…", statuses: LS_DOC_STATUSES, data: docs },
mgrq: { search: "Пошук у питаннях менеджерів…", statuses: LS_MGRQ_STATUSES, data: mgrq },
};
const def = defs[tab];
const warrActive = warranty.filter(l => ["new", "wait_client", "in_sc", "wait_return"].includes(l.status)).length;
const counts = {
product: { count: products.length, alert: products.filter(l => l.status === "new").length, alertLabel: products.filter(l => l.status === "new").length + " нові без відповіді" },
warranty: { count: warranty.length, alert: warrActive, alertLabel: warrActive + " в роботі" },
return: { count: returns.length, alert: returns.filter(l => l.day >= 12).length, alertLabel: "строк спливає" },
question: { count: questions.length, alert: questions.filter(l => l.status === "open").length, alertLabel: questions.filter(l => l.status === "open").length + " без відповіді" },
};
return (
{/* Картки-вкладки: 4 клієнтські + 2 внутрішні */}
Звернення клієнтів
{Object.values(LS_TYPES).map(t => (
setTab(t.key)}/>
))}
Внутрішні — для керівника
setTab("docs")}/>
setTab("mgrq")}/>
{/* Тулбар вкладки */}
{tab === "docs" && (
setDocModal(true)} style={{ display: "inline-flex" }}>
Додати документ
)}
{isOwner && (
setMgrFilter(e.target.value)} title="Фільтр по менеджеру" style={{
height: 32, padding: "0 10px", borderRadius: 7, fontFamily: "inherit", fontSize: 12.5, outline: "none",
background: "var(--bg-raised)", color: mgrFilter !== "all" ? "var(--accent)" : "var(--fg-secondary)",
border: "1px solid " + (mgrFilter !== "all" ? "var(--accent)" : "var(--border-default)"), cursor: "pointer",
}}>
Усі менеджери
{[...new Set(records.map(r => (r.manager || "").trim()).filter(Boolean))].sort().map(m => {m} )}
)}
{refreshing ? "Оновлення…" : "Оновити"}
setNewModal(true)} style={{ display: "inline-flex" }}>
Нова заявка
{/* Воронка + перемикач Активні/Архів — лише для товарних заявок */}
{tab === "product" &&
}
{tab === "warranty" && LS_WARR_DONE.has(l.status)).length} archiveN={warranty.filter(l => LS_WARR_DONE.has(l.status)).length}/>}
{tab === "docs" && LS_DOC_DONE.has(l.status)).length} archiveN={docs.filter(l => LS_DOC_DONE.has(l.status)).length}/>}
{/* Стіл вкладки (+ картка запиту товару праворуч) */}
{tab === "product" &&
}
{tab === "warranty" && }
{tab === "return" && }
{tab === "question" && }
{tab === "docs" && }
{tab === "mgrq" && q.status === "open").length} leads={mgrq} onAnswer={answerMgr} onEdit={setEditing} onStatus={changeStatus}/>}
Показано {def.data.length} із {def.data.length}
{docModal && setDocModal(false)} onAdd={addDoc}/>}
{newModal && setNewModal(false)} onCreate={createLead}/>}
{editing && setEditing(null)} onSave={editLead} onDelete={removeLead}/>}
Сьогодні: {LS_SUMMARY.total} · {LS_SUMMARY.totalSub}
}/>
);
}
Object.assign(window, { LsFinalPage, LsLeadsModule, LsLeadFunnel, LS_TERMINAL });