// Shared primitives — Digitalshop CRM const { useState, useEffect, useRef, useCallback, useContext, createContext } = React; // ── Language context ────────────────────────────────────────────── const LangCtx = createContext("uk"); const LABELS = { uk: { orders: "Замовлення", calls: "Дзвінки", banking: "Банки", requests: "Заявки", settings: "Налаштування" }, ru: { orders: "Заказы", calls: "Звонки", banking: "Банки", requests: "Заявки", settings: "Настройки" }, }; function useLabels() { const lang = useContext(LangCtx); return LABELS[lang] || LABELS.uk; } // ── Status config ───────────────────────────────────────────────── const STATUSES = { new: { label: "Новий", cls: "status-new", horoshopId: 1 }, waiting_reply: { label: "Очікуємо відповідь", cls: "status-waiting-reply", horoshopId: 9 }, processing: { label: "В обробці", cls: "status-processing", horoshopId: 2 }, shipped: { label: "Надіслане", cls: "status-shipped", horoshopId: 6 }, at_branch: { label: "В відділенні", cls: "status-at-branch", horoshopId: 3 }, completed: { label: "Виконано", cls: "status-completed", horoshopId: 8 }, cancelled: { label: "Скасовано", cls: "status-cancelled", horoshopId: 4 }, awaiting_supply: { label: "Очікує поставку", cls: "status-awaiting-supply", horoshopId: 7 }, preparing: { label: "Готуємо до відправки", cls: "status-preparing", horoshopId: 10 }, client_thinking: { label: "Клієнт думає", cls: "status-client-thinking", horoshopId: 11 }, ttn_ready: { label: "Готова ТТН", cls: "status-ttn-ready", horoshopId: 13 }, }; // Horoshop status_id → our key const HOROSHOP_STATUS_MAP = { 1: "new", 9: "waiting_reply", 2: "processing", 6: "shipped", 3: "at_branch", 8: "completed", 4: "cancelled", 7: "awaiting_supply", 10: "preparing", 11: "client_thinking", 13: "ttn_ready", }; // ── Formatters ──────────────────────────────────────────────────── const MONTHS = ["січ.","лют.","бер.","квіт.","трав.","черв.","лип.","серп.","вер.","жовт.","лист.","груд."]; function fmtDate(str) { if (!str) return "—"; const d = new Date(str.replace(" ", "T")); if (isNaN(d)) return str; const now = new Date(); const isToday = d.toDateString() === now.toDateString(); const hm = `${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}`; if (isToday) return `Сьогодні, ${hm}`; return `${d.getDate()} ${MONTHS[d.getMonth()]}, ${hm}`; } function fmtPhone(p) { if (!p) return "—"; return p.replace(/(\+\d{2})(\d{3})(\d{3})(\d{2})(\d{2})/, "$1 $2 $3 $4 $5"); } function copyText(text) { if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(text); } else { const el = document.createElement("textarea"); el.value = text; el.style.position = "fixed"; el.style.opacity = "0"; document.body.appendChild(el); el.select(); document.execCommand("copy"); document.body.removeChild(el); } } function fmtMoney(n) { if (n == null) return "—"; return Number(n).toLocaleString("uk-UA").replace(/,/g, " ") + " ₴"; } function fmtBalance(n) { return Number(n).toLocaleString("uk-UA", { minimumFractionDigits: 2, maximumFractionDigits: 2 }).replace(/,/g, " ") + " ₴"; } // ── Icon (Lucide) ───────────────────────────────────────────────── function Icon({ name, size = 20, color, style }) { const ref = useRef(null); useEffect(() => { if (ref.current && window.lucide) { ref.current.innerHTML = ""; const el = document.createElement("i"); el.setAttribute("data-lucide", name); el.style.width = size + "px"; el.style.height = size + "px"; if (color) el.style.color = color; ref.current.appendChild(el); window.lucide.createIcons({ nameAttr: "data-lucide" }); } }, [name, size, color]); return ; } // ── StatusChip ──────────────────────────────────────────────────── function StatusChip({ status }) { const s = STATUSES[status]; if (!s) return —; return {s.label}; } // ── Button ──────────────────────────────────────────────────────── function Button({ variant = "primary", size = "md", children, onClick, style, leftIcon, disabled }) { const base = { display: "inline-flex", alignItems: "center", gap: 8, border: 0, fontFamily: "inherit", fontWeight: 500, cursor: disabled ? "not-allowed" : "pointer", whiteSpace: "nowrap", transition: `all ${150}ms cubic-bezier(.2,0,0,1)`, opacity: disabled ? 0.5 : 1, }; const sizes = { sm: { height: 28, padding: "0 10px", fontSize: 12, borderRadius: 6 }, md: { height: 36, padding: "0 16px", fontSize: 13, borderRadius: 8 }, }; const variants = { primary: { background: "var(--accent)", color: "#fff" }, secondary: { background: "var(--bg-raised)", color: "var(--fg-primary)", border: "1px solid var(--border-default)" }, ghost: { background: "transparent", color: "var(--fg-secondary)" }, danger: { background: "rgba(244,63,94,.14)", color: "var(--danger)", border: "1px solid rgba(244,63,94,.3)" }, }; return ( ); } // ── Avatar ──────────────────────────────────────────────────────── function Avatar({ name, size = 28 }) { const initials = (name || "?").split(" ").map(s => s[0]).slice(0, 2).join(""); return (
{initials}
); } // ── BankMonogram ────────────────────────────────────────────────── function BankMonogram({ bank, size = 32 }) { const banks = { privat: { letter: "П", bg: "#5A9C32" }, mono: { letter: "M", bg: "#000000" }, pumb: { letter: "П", bg: "#E63946" }, oschad: { letter: "О", bg: "#1E5F3B" }, }; const b = banks[bank] || banks.privat; return (
{b.letter}
); } // ── Sidebar (desktop) ───────────────────────────────────────────── function Sidebar({ active, onChange, userName = "Менеджер", role = "manager" }) { const L = useLabels(); const [collapsed, setCollapsed] = useState(() => localStorage.getItem("crm_sidebar_collapsed") === "1"); const toggle = () => setCollapsed(c => { localStorage.setItem("crm_sidebar_collapsed", c ? "0" : "1"); return !c; }); const items = [ { key: "orders", label: L.orders, icon: "package" }, { key: "requests", label: L.requests, icon: "inbox" }, { key: "calls", label: L.calls, icon: "phone-call" }, ...(role === "owner" ? [{ key: "banking", label: L.banking, icon: "wallet" }] : []), { key: "settings", label: L.settings, icon: "settings" }, ]; const w = collapsed ? 56 : 240; return ( ); } // ── TopBar (desktop) ────────────────────────────────────────────── function TopBar({ title }) { return (

{title}

); } // ── BottomTabs (mobile) ─────────────────────────────────────────── function BottomTabs({ active, onChange, role = "manager" }) { const L = useLabels(); const items = [ { key: "orders", label: L.orders, icon: "package" }, { key: "requests", label: L.requests, icon: "inbox" }, { key: "calls", label: L.calls, icon: "phone-call" }, ...(role === "owner" ? [{ key: "banking", label: L.banking, icon: "wallet" }] : []), { key: "settings", label: L.settings, icon: "settings" }, ]; return (
{items.map(item => { const isActive = active === item.key; return ( ); })}
{/* safe-area spacer for iPhone home indicator */}
); } // ── MobileTopBar ────────────────────────────────────────────────── function MobileTopBar({ title, right }) { return (

{title}

{right}
); } // ── Toast ───────────────────────────────────────────────────────── function ToastContainer({ toasts }) { return (
{toasts.map(t => (
{t.message}
))}
); } // ── Loading skeleton row ────────────────────────────────────────── function SkeletonRows({ n = 8 }) { return (
{Array.from({ length: n }).map((_, i) => (
))}
); } // ── Empty state ─────────────────────────────────────────────────── function EmptyState({ icon = "inbox", message = "Нічого не знайдено", action }) { return (

{message}

{action}
); } // ── Messenger badges ────────────────────────────────────────────── const MSG_BRANDS = { telegram: { color: "#229ED9", svg: }, viber: { color: "#7360F2", svg: }, whatsapp: { color: "#25D366", svg: }, }; function MessengerBtn({ kind, phone }) { const m = MSG_BRANDS[kind]; if (!m) return null; let href = null; if (phone && phone !== "—") { const digits = phone.replace(/\D/g, ""); const intl = digits.startsWith("38") && digits.length === 12 ? digits : "38" + (digits.startsWith("0") ? digits.slice(1) : digits); if (kind === "viber") href = `viber://chat?number=%2B${intl}`; if (kind === "whatsapp") href = `https://wa.me/${intl}`; if (kind === "telegram") href = `https://t.me/%2B${intl}`; } const inner = ( {React.cloneElement(m.svg, { width: 14, height: 14 })} ); if (href) return {inner}; return inner; } // ── Paid badge ──────────────────────────────────────────────────── function PaidBadge({ payed }) { return payed == 1 ? Оплачено : Не оплачено; } // ── Call utilities (shared with Orders.jsx) ─────────────────────── function fmtDur(sec) { const s = Number(sec) || 0; return `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`; } function fmtCallDate(str) { if (!str) return '—'; const d = new Date(str.replace(' ', 'T')); if (isNaN(d)) return str; const now = new Date(); const dDay = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(); const tDay = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime(); const time = d.toTimeString().slice(0, 5); if (dDay === tDay) return `Сьогодні, ${time}`; if (dDay === tDay - 86400000) return `Вчора, ${time}`; return `${String(d.getDate()).padStart(2,'0')}.${String(d.getMonth()+1).padStart(2,'0')}.${d.getFullYear()}, ${time}`; } const CALL_DISP_COLOR = { ANSWERED: 'var(--credit)', 'NO ANSWER': '#ef4444', MISSED: '#ef4444', BUSY: '#f59e0b', FAILED: '#ef4444', }; function CallPlayer({ recording, playing, onToggle, progress }) { if (!recording) return —; return (
); } Object.assign(window, { LangCtx, STATUSES, HOROSHOP_STATUS_MAP, fmtDate, fmtPhone, fmtMoney, fmtBalance, fmtDur, fmtCallDate, CALL_DISP_COLOR, CallPlayer, Icon, StatusChip, Button, Avatar, BankMonogram, Sidebar, TopBar, BottomTabs, MobileTopBar, ToastContainer, SkeletonRows, EmptyState, MessengerBtn, PaidBadge, useState, useEffect, useRef, useCallback, });