// ============================================================================ // REQUESTS / ЗАЯВКИ — точний відтворення дизайну // ============================================================================ const { useState, useEffect, useCallback, useRef } = React; // ── Status config (наші назви зі Sheet → дизайн-стилі) ─────────── const LEAD_STATUSES = { "Нова": { label: "Нова", dot: "var(--accent)", fg: "var(--fg-primary)", bg: "var(--accent-soft)" }, "В роботі": { label: "В роботі", dot: "#F59E0B", fg: "#FBBF24", bg: "rgba(245,158,11,.14)" }, "Конвертовано": { label: "Конвертовано", dot: "#10B981", fg: "#6EE7B7", bg: "rgba(16,185,129,.14)" }, "Закрита": { label: "Закрита", dot: "#6B7280", fg: "var(--fg-muted)", bg: "rgba(107,114,128,.12)" }, }; const STATUS_NAMES = Object.keys(LEAD_STATUSES); // ── Bot replies ─────────────────────────────────────────────────── const BOT_REPLIES = { available: { label: "В наявності", color: "#10B981", bg: "rgba(16,185,129,.12)", icon: "check-circle" }, awaiting: { label: "Уточнюється", color: "#F59E0B", bg: "rgba(245,158,11,.14)", icon: "clock" }, out: { label: "Немає", color: "#EF4444", bg: "rgba(239,68,68,.14)", icon: "x-circle" }, "—": { label: "—", color: "var(--fg-muted)", bg: "transparent", icon: "minus" }, }; function parseBotKey(supplier) { if (!supplier) return "—"; if (String(supplier).startsWith("✅")) return "available"; if (String(supplier).startsWith("⏳")) return "awaiting"; if (String(supplier).startsWith("❌")) return "out"; return "—"; } // ── Sources ─────────────────────────────────────────────────────── const SOURCES = { telegram: { label: "Telegram", icon: "send", color: "#229ED9" }, viber: { label: "Viber", icon: "phone", color: "#7360F2" }, site: { label: "CRM", icon: "monitor", color: "var(--fg-secondary)" }, call: { label: "Дзвінок", icon: "phone-call", color: "#10B981" }, whatsapp: { label: "WhatsApp", icon: "message-circle", color: "#25D366" }, }; function mapSource(src) { const m = { "CRM": "site", "Дзвінок": "call", "Telegram": "telegram", "Viber": "viber" }; return m[src] || "site"; } // ── Age helpers ─────────────────────────────────────────────────── function parseReqDate(str) { if (!str) return null; const m = str.match(/(\d{1,2})\.(\d{2})\.(\d{4}),?\s*(\d{2}):(\d{2})/); if (!m) return null; return new Date(`${m[3]}-${m[2]}-${String(m[1]).padStart(2,"0")}T${m[4]}:${m[5]}:00`); } function calcAgeMin(str) { const d = parseReqDate(str); return d ? Math.max(0, Math.floor((Date.now() - d.getTime()) / 60000)) : 0; } function fmtAge(min) { if (min < 60) return `${min} хв`; if (min < 1440) return `${Math.floor(min / 60)} год`; return `${Math.floor(min / 1440)} д`; } function ageTone(min, status) { if (status === "Конвертовано" || status === "Закрита") return "var(--fg-muted)"; if (min < 15) return "#10B981"; if (min < 60) return "var(--fg-secondary)"; if (min < 240) return "#F59E0B"; return "#EF4444"; } // ── Adapt API row → lead shape ──────────────────────────────────── function toLeadShape(r) { const ageMin = calcAgeMin(r.date); return { _raw: r, id: r.id, ts: r.date || "", source: mapSource(r.source), product: r.product || "", phone: r.phone || "", clientName: r.name || "—", bot: parseBotKey(r.supplier), manager: r.manager || "—", status: r.status || "Нова", ageMin, note: r.type !== "Запит товару" ? (r.desc || "") : (r.desc || ""), type: r.type || "", orderId: r.orderId || null, comment: r.comment || "", supplier: r.supplier|| "", }; } // ── Lead types for new modal ─────────────────────────────────────── const LEAD_TYPES = [ { key: "Запит товару", icon: "package", desc: "Перевірити наявність SKU" }, { key: "Гарантія", icon: "shield-check", desc: "Гарантійний випадок" }, { key: "Повернення", icon: "rotate-ccw", desc: "Повернення або обмін" }, { key: "Питання", icon: "message-circle", desc: "Загальне питання" }, ]; // ───────────────────────────────────────────────────────────────── // KPI strip // ───────────────────────────────────────────────────────────────── function LeadsKPI({ leads }) { const total = leads.length; const newCount = leads.filter(l => l.status === "Нова").length; const waiting = leads.filter(l => l.status === "В роботі").length; const converted = leads.filter(l => l.status === "Конвертовано").length; const conversion = total > 0 ? Math.round((converted / total) * 100) : 0; const oldUnhandled = leads.filter(l => (l.status === "Нова" || l.status === "В роботі") && l.ageMin > 60 ).length; // Менеджери: групуємо кількість активних заявок по імені const mgrMap = {}; leads.filter(l => l.status !== "Закрита" && l.status !== "Конвертовано").forEach(l => { const m = l.manager === "—" ? "Не призначено" : (l.manager || "Не призначено"); mgrMap[m] = (mgrMap[m] || 0) + 1; }); const mgrEntries = Object.entries(mgrMap).sort((a, b) => b[1] - a[1]); return (
{/* Stat cards row */}
{[ { label: "Всього", value: total, sub: "", tone: "var(--fg-primary)" }, { label: "Нові", value: newCount, sub: "Потребують відповіді", tone: "var(--accent)", pulse: newCount > 0 }, { label: "В роботі", value: waiting, sub: "Уточнення наявності", tone: "#F59E0B" }, { label: "Прострочені", value: oldUnhandled, sub: "> 1 год без відповіді", tone: oldUnhandled > 0 ? "#EF4444" : "var(--fg-muted)" }, { label: "Конверсія", value: conversion + "%", sub: `${converted} в замовленні`, tone: "#10B981" }, ].map((s, i) => (
{s.pulse && } {s.label}
{s.value}
{s.sub &&
{s.sub}
}
))}
{/* Менеджери row */} {mgrEntries.length > 0 && (
Відповідальні: {mgrEntries.map(([name, count]) => ( {name} {count} ))}
)}
); } // ───────────────────────────────────────────────────────────────── // KPI strip mobile // ───────────────────────────────────────────────────────────────── function LeadsKPIM({ leads }) { const newCount = leads.filter(l => l.status === "Нова").length; const overdue = leads.filter(l => (l.status === "Нова" || l.status === "В роботі") && l.ageMin > 30).length; const today = leads.filter(l => l.ageMin < 1440).length; return (
{[ { label: "Нові", value: newCount, tone: "#3B82F6" }, { label: "Прострочені", value: overdue, tone: "#EF4444" }, { label: "За добу", value: today, tone: "#10B981" }, ].map(k => (
{k.label}
{k.value}
))}
); } // ───────────────────────────────────────────────────────────────── // Filter chips // ───────────────────────────────────────────────────────────────── function FilterChips({ filter, onChange, leads }) { const counts = { all: leads.length, ...Object.fromEntries(STATUS_NAMES.map(s => [s, leads.filter(l => l.status === s).length])), }; const chips = [ { key: "all", label: "Усі" }, ...STATUS_NAMES.map(s => ({ key: s, label: LEAD_STATUSES[s].label, dot: LEAD_STATUSES[s].dot })), ]; return (
{chips.map(c => { const active = filter === c.key; return ( ); })}
); } // ───────────────────────────────────────────────────────────────── // Pills // ───────────────────────────────────────────────────────────────── function SourcePill({ source }) { const s = SOURCES[source] || SOURCES.site; return ( {s.label} ); } function BotPill({ bot }) { const r = BOT_REPLIES[bot] || BOT_REPLIES["—"]; return ( {r.label} ); } function StatusDot({ status }) { const s = LEAD_STATUSES[status] || LEAD_STATUSES["Нова"]; return ( {s.label} ); } // ───────────────────────────────────────────────────────────────── // Lead row (desktop) // ───────────────────────────────────────────────────────────────── function LeadRow({ lead, selected, onSelect, onStatusChange }) { const [showStatus, setShowStatus] = useState(false); const tone = ageTone(lead.ageMin, lead.status); const isHot = lead.ageMin < 15 && lead.status !== "Конвертовано" && lead.status !== "Закрита"; const isStale = lead.ageMin > 60 && (lead.status === "Нова" || lead.status === "В роботі"); const isSel = selected?.id === lead.id; return (
onSelect(lead)} className="lead-row" style={{ display: "grid", gridTemplateColumns: "36px 70px minmax(0,1.5fr) minmax(0,1.1fr) 100px 110px 110px 90px", alignItems: "center", gap: 10, padding: "12px 18px", borderBottom: "1px solid var(--border-subtle)", cursor: "pointer", background: isSel ? "var(--bg-active)" : (isStale ? "rgba(239,68,68,.025)" : "transparent"), borderLeft: "3px solid " + (isSel ? "var(--accent)" : (isHot ? "#10B981" : (isStale ? "#EF4444" : "transparent"))), paddingLeft: 17, }}> #{lead.id}
{fmtAge(lead.ageMin)} {lead.ts.slice(-5) || "—"}
{lead.product || lead.note || "—"} {(lead.note && lead.product) && ( {lead.note} )} {lead.type && {lead.type}}
{lead.clientName} {fmtPhone(lead.phone)}
{showStatus && ( <>
{ e.stopPropagation(); setShowStatus(false); }}/>
{STATUS_NAMES.map(s => ( ))}
)}
{lead.manager === "—" ? ( не призначено ) : ( <> {lead.manager} )}
); } // ───────────────────────────────────────────────────────────────── // Detail rail (right panel, desktop) // ───────────────────────────────────────────────────────────────── function LeadDetail({ lead, onClose, onConvert, onCollapse, onEdit }) { if (!lead) { return (
Виберіть заявку
Натисніть на рядок ліворуч, щоб переглянути деталі
); } const tone = ageTone(lead.ageMin, lead.status); const mainText = lead.type === "Запит товару" ? lead.product : (lead.note || lead.product); return (
{/* Header */}
#{lead.id}
{/* SLA */}
{fmtAge(lead.ageMin)} тому
{lead.ts}
{/* Запит */}
{lead.type === "Запит товару" ? "Артикул / товар" : "Суть заявки"}
{mainText || "—"}
{lead.comment && (
{lead.comment}
)}
{/* Відповідь бота */} {lead.type === "Запит товару" && (
Відповідь Telegram-бота
)} {/* Клієнт */}
Клієнт
{lead.clientName}
{fmtPhone(lead.phone)}
{/* Джерело + Менеджер */}
Джерело
Менеджер
{lead.manager === "—" ? ( не призначено ) : (
{lead.manager}
)}
{/* Пов'язане замовлення */} {lead.orderId && (
Пов'язане замовлення
#{lead.orderId}
)}
{/* Footer */} {lead.status !== "Конвертовано" && lead.status !== "Закрита" && (
)}
); } // ───────────────────────────────────────────────────────────────── // New lead modal // ───────────────────────────────────────────────────────────────── function NewLeadModal({ open, onClose, onSave, prefill, userName, isEdit }) { if (!open) return null; const [type, setType] = useState(prefill?.type || "Запит товару"); const [sku, setSku] = useState(prefill?.sku || ""); const [phone, setPhone] = useState(prefill?.phone || ""); const [name, setName] = useState(prefill?.name || ""); const [source, setSource] = useState(prefill?.source || "call"); const [note, setNote] = useState(prefill?.note || ""); const [comment, setComment] = useState(prefill?.comment || ""); const [orderId, setOrderId] = useState(prefill?.orderId || ""); const [checking, setChecking] = useState(false); const [checkResult, setCheckResult] = useState(null); // { label, supplierValue, autoConfirmed, ok } const [supplier, setSupplier] = useState(prefill?.supplier || ""); const [draftId, setDraftId] = useState(prefill?.id || null); const isOrderRequired = type === "Гарантія" || type === "Повернення"; const isValid = type === "Запит товару" ? sku.trim() : (note.trim() && (isOrderRequired ? orderId.trim() : true)); const handleCheck = async () => { if (!sku.trim()) return; setChecking(true); setCheckResult(null); try { let reqId = draftId; if (!reqId && !isEdit) { const draft = await API.createRequest({ type: "Запит товару", product: sku.trim(), manager: userName || "", skipAutoFind: true }); reqId = draft.id; setDraftId(reqId); } const result = await API.checkAvailability(sku.trim(), userName, reqId); setCheckResult(result); if (result.supplierValue) setSupplier(result.supplierValue); if (result.article && !sku.trim().includes(result.article)) setSku(result.article); } catch { setCheckResult({ ok: false, label: "❌ Помилка зв'язку з ботом" }); } finally { setChecking(false); } }; const submit = (e) => { e?.preventDefault(); if (!isValid) return; onSave({ type, sku, phone, name, source, note, comment, orderId, supplier, manager: userName || "", draftId }); onClose(); }; const kbd = { display: "inline-block", padding: "1px 5px", border: "1px solid var(--border-default)", borderRadius: 4, background: "var(--bg-panel)", fontSize: 10, fontFamily: "var(--font-mono)", color: "var(--fg-secondary)" }; return (
e.stopPropagation()} onSubmit={submit} style={{ width: 560, maxHeight: "90vh", background: "var(--bg-raised)", border: "1px solid var(--border-default)", borderRadius: 12, boxShadow: "0 30px 80px rgba(0,0,0,.5)", display: "flex", flexDirection: "column", overflow: "hidden" }}> {/* Header */}

{isEdit ? "Редагувати заявку" : "Нова заявка"}

{isEdit ? `#${prefill?.id}` : "Зафіксуйте звернення клієнта"}
{/* Body */}
{/* Type cards */} Тип заявки
{LEAD_TYPES.map(lt => { const active = type === lt.key; return ( ); })}
{/* SKU + check button for product */} {type === "Запит товару" && (
Артикул або назва товару
{ setSku(e.target.value); setCheckResult(null); }} placeholder="Напр. iPhone 15 Pro Max 256GB" autoFocus onKeyDown={e => e.key === "Enter" && handleCheck()} style={{ width: "100%", height: 38, boxSizing: "border-box", padding: "0 12px 0 36px", background: "var(--bg-panel)", color: "var(--fg-primary)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 13, outline: "none", fontFamily: "inherit" }}/>
{/* Check result */} {checkResult && (
{checkResult.label}
{checkResult.title && checkResult.title !== sku &&
{checkResult.title}
}
{checkResult.ok && Повідомлення відправлено ✓}
)}
)} {/* Phone + Name */}
Телефон
Ім'я клієнта
{/* Order + Product (not for product request) */} {type !== "Запит товару" && (
№ замовлення{isOrderRequired ? " *" : ""}
Товар
)} {/* Source */}
Джерело
{Object.entries(SOURCES).map(([key, s]) => { const active = source === key; return ( ); })}
{/* Note */}
{type === "Запит товару" ? "Деталі запиту" : "Суть заявки"}