setHover(true)} onMouseLeave={() => setHover(false)} style={{
background: "var(--bg-panel)", border: "1px solid " + (hover ? "var(--border-strong)" : "var(--border-subtle)"),
borderRadius: 14, overflow: "hidden", display: "flex", flexDirection: "column",
transition: "border-color 150ms", boxShadow: hover ? "var(--shadow-1)" : "none",
}}>
{/* ── plastic (click → detail) ── */}
onOpen && onOpen(c)} title="Відкрити оплати цієї картки" style={{
position: "relative", padding: 18, background: theme.grad, color: "#fff", cursor: "pointer",
minHeight: 168, display: "flex", flexDirection: "column",
filter: dim ? "grayscale(.7)" : "none", opacity: dim ? 0.62 : 1, transition: "all 200ms",
}}>
{/* sheen */}
{/* top: chip + bank */}
{theme.label}
{c.active ? "Активна" : (c.autoDisabled ? "Вимкнена · ліміт" : "Вимкнена")}
{/* number */}
{cdNumGrouped(c)}
{/* holder + bindings */}
Отримувач
{c.holder || "—"}
{c.monoSenderId && }
{c.supplierKey && }
{/* ── limit block on plastic ── */}
{noLimit ? (
Без ліміту надходжень
) : (
Залишок
{cdFmtUAH(remaining)}
{cdFmtBare(c.limitAmount)} ₴
вікно {c.limitDays} {cdPluralDays(c.limitDays)}
0 ? 4 : 0) + "%", background: tone, borderRadius: 999, transition: "width 300ms cubic-bezier(.2,0,0,1)" }}/>
Використано {cdFmtBare(c.used)} ₴
= 0.9 ? "#FECDD3" : pct >= 0.7 ? "#FDE68A" : "rgba(255,255,255,.6)", fontWeight: 600 }}>{Math.round(pct * 100)}%
)}
{/* note (below plastic, not shown to managers) */}
{c.note && !confirming && (
{c.note}
)}
{/* ── controls strip ── */}
{confirming ? (
{pendingCount > 0 ? "Є записи в журналі — видалити не можна" : "Видалити картку?"}
{pendingCount === 0 && (
)}
) : (
onToggle(c)}/>
onCopy(c)} tone={copied ? "var(--credit)" : "var(--fg-secondary)"}/>
onEdit(c)}/>
onConfirmOpen(c.id)} danger/>
)}
);
}
// ════════════════════════════════════════════════════════════════════════════
// ANALYTICS — 3 number cards + 7/30/90 switch + horizontal share bars
// Uses server /api/cards/analytics (totals + byCard). Bars: confirmedSum.
// ════════════════════════════════════════════════════════════════════════════
function CdStatCard({ label, value, count, color, icon }) {
return (
{label}
{cdFmtBare(value)} ₴
{count != null &&
{count} {cdPluralPays(count)}
}
);
}
function CdAnalyticsPanel({ cards, an, days, onDays, isMobile }) {
const totals = (an && an.totals) || { confirmedSum: 0, confirmedCount: 0, receiptSum: 0, waitingSum: 0 };
// byCard from server: { cardId, label, confirmedSum, confirmedCount, ... }
const byCard = ((an && an.byCard) || [])
.filter(x => x.confirmedSum > 0)
.map(x => {
const card = cards.find(c => c.id === x.cardId);
return { ...x, theme: cdBankTheme(card ? card.bank : "") };
})
.sort((a, b) => b.confirmedSum - a.confirmedSum);
const maxSum = Math.max(1, ...byCard.map(x => x.confirmedSum));
return (
Аналітика: прийнято на картки
{[7, 30, 90].map(d => (
))}
{byCard.length > 0 && (
Підтверджено по картках
{byCard.map(x => (
{x.label}
{cdFmtUAH(x.confirmedSum)}
))}
)}
);
}
// ════════════════════════════════════════════════════════════════════════════
// JOURNAL — filter chips + search + overdue highlight + confirm/cancel
// ════════════════════════════════════════════════════════════════════════════
function CdJournalRow({ e, isMobile, onConfirm, onCancel }) {
const [hover, setHover] = cdUseState(false);
const s = CD_EXP[e.status] || CD_EXP.waiting;
const actionable = e.status === "waiting" || e.status === "receipt_sent";
const showActions = actionable && (isMobile || hover);
const card = e.card || {};
const ageH = cdAgeHours(e.createdAt);
return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{
display: "flex", alignItems: "center", gap: isMobile ? 10 : 14, padding: isMobile ? "12px 12px 12px 14px" : "11px 14px",
borderRadius: 10, flexWrap: isMobile ? "wrap" : "nowrap",
background: e.overdue ? "rgba(244,63,94,.07)" : (hover ? "var(--bg-hover)" : "transparent"),
border: "1px solid " + (e.overdue ? "rgba(244,63,94,.28)" : "var(--border-subtle)"),
borderLeft: e.overdue ? "3px solid var(--danger)" : "1px solid var(--border-subtle)",
transition: "background 130ms",
}}>
№{e.orderId}
{cdFmtUAH(e.amount)}
•{cdLast4(card.numberGrouped || "")}{card.bank ? " " + card.bank : ""}
{e.manager}
{e.mono && e.mono.found && (
у виписці Mono
)}
{e.overdue && (
прострочено {ageH} год
)}
{cdFmtTime(e.createdAt)}
{s.label}{e.status === "confirmed" && e.confirmedBy ? " · " + e.confirmedBy : ""}
{showActions && (
onConfirm(e)} tone="var(--credit)"/>
onCancel(e)} danger/>
)}
);
}
function CdJournalPanel({ journal, isMobile, onConfirm, onCancel }) {
const [filter, setFilter] = cdUseState("all");
const [query, setQuery] = cdUseState("");
const counts = {
all: journal.length,
waiting: journal.filter(e => e.status === "waiting").length,
receipt_sent: journal.filter(e => e.status === "receipt_sent").length,
confirmed: journal.filter(e => e.status === "confirmed").length,
};
const overdueN = journal.filter(e => e.overdue).length;
const rows = journal
.filter(e => filter === "all" ? true : e.status === filter)
.filter(e => !query.trim() || String(e.orderId).includes(query.trim()))
.sort((a, b) => ((b.overdue ? 1 : 0) - (a.overdue ? 1 : 0)) || (cdDaysAgo(a.createdAt) - cdDaysAgo(b.createdAt)));
return (
Журнал: хто скопіював реквізити
{overdueN > 0 && (
{overdueN} прострочено
)}
setFilter("all")} count={counts.all}>Всі
setFilter("waiting")} count={counts.waiting} tone={CD_EXP.waiting.color}>Очікуємо
setFilter("receipt_sent")} count={counts.receipt_sent} tone={CD_EXP.receipt_sent.color}>Скрін
setFilter("confirmed")} count={counts.confirmed} tone={CD_EXP.confirmed.color}>Підтверджено
setQuery(e.target.value.replace(/\D/g, ""))} placeholder="№ замовлення" inputMode="numeric" style={{
width: "100%", boxSizing: "border-box", height: 36, padding: "0 12px 0 34px", background: "var(--bg-base)",
color: "var(--fg-primary)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12.5, outline: "none",
fontFamily: "var(--font-mono)",
}}/>
{rows.length === 0 ? (
За цим фільтром записів немає
) : (
{rows.map(e => )}
)}
);
}
// ════════════════════════════════════════════════════════════════════════════
// CARD FORM — slide-in panel (add / edit). Maps to snake_case API body.
// ════════════════════════════════════════════════════════════════════════════
function cdBlankForm() {
return { id: null, number: "", holder: "", bank: "", limitAmount: 40000, limitDays: 7,
monoSenderId: "", supplierKey: "", note: "", rate: "" };
}
function cdFormFromCard(c) {
return {
id: c.id,
number: cdNumber(c),
holder: c.holder || "",
bank: c.bank || "",
limitAmount: c.limitAmount || 0,
limitDays: c.limitDays || 7,
monoSenderId: c.monoSenderId || "",
supplierKey: c.supplierKey || "",
note: c.note || "",
rate: c.rate ? String(c.rate) : "",
};
}
function CdCardForm({ initial, isNew, senders, suppliers, supplierCur, onCancel, onSave }) {
const [form, setForm] = cdUseState(() => ({ ...initial }));
const [errors, setErrors] = cdUseState({});
const [busy, setBusy] = cdUseState(false);
const [serverErr, setServerErr] = cdUseState("");
const set = (patch) => setForm(f => ({ ...f, ...patch }));
const noLimit = !form.limitAmount || form.limitAmount <= 0;
// binding mode derived: none | mono | supplier (mutually exclusive)
const bindMode = form.monoSenderId ? "mono" : form.supplierKey ? "supplier" : "none";
const monoSenders = (senders || []).filter(s => s.hasMono);
const setBind = (mode) => {
if (mode === "none") set({ monoSenderId: "", supplierKey: "" });
else if (mode === "mono") set({ supplierKey: "", monoSenderId: form.monoSenderId || (monoSenders[0] ? monoSenders[0].id : "") });
else set({ monoSenderId: "", supplierKey: form.supplierKey || (suppliers && suppliers[0]) || "" });
};
const onNumber = (raw) => set({ number: raw.replace(/\D/g, "").slice(0, 16) });
const previewTheme = cdBankTheme(form.bank);
const validate = () => {
const e = {};
const digits = (form.number || "").replace(/\D/g, "");
if (digits.length < 16) e.number = "Введіть 16 цифр";
if (!form.holder.trim()) e.holder = "Вкажіть отримувача";
if (!noLimit && (!form.limitAmount || form.limitAmount < 0)) e.limitAmount = "Некоректна сума";
setErrors(e);
return Object.keys(e).length === 0;
};
const submit = () => {
if (busy || !validate()) return;
setBusy(true); setServerErr("");
const body = {
number: (form.number || "").replace(/\D/g, ""),
holder: form.holder.trim(),
bank: form.bank.trim(),
limit_amount: noLimit ? 0 : (Number(form.limitAmount) || 0),
limit_days: parseInt(form.limitDays, 10) || 7,
mono_sender_id: form.monoSenderId || "",
supplier_key: form.supplierKey || "",
note: form.note || "",
rate: Number(String(form.rate).replace(",", ".")) || 0,
};
const req = isNew
? cdJson("/api/cards", { method: "POST", ...cdBody(body) })
: cdJson("/api/cards/" + form.id, { method: "PUT", ...cdBody(body) });
req.then(() => { setBusy(false); onSave(); })
.catch(err => { setBusy(false); setServerErr(err.message); });
};
const presets = [2, 3, 7, 30];
return (
{/* header */}
{isNew ? "Нова картка" : "Редагування картки"}
Реквізити для оплат від клієнтів
{/* body */}
{/* live mini preview */}
{cdGroup(form.number) || "•••• •••• •••• ••••"}
{previewTheme.label}
{form.holder || "Отримувач"}
set({ holder: v })} placeholder="Прізвище Ім'я" error={errors.holder}/>
set({ bank: v })} placeholder="Mono / Privat / Pumb"/>
{/* limit */}
Ліміт надходжень
{!noLimit && (
set({ limitAmount: Number(v.replace(/\D/g, "")) })} placeholder="40000" mono inputMode="numeric" error={errors.limitAmount}/>
{presets.map(d => {
const on = form.limitDays === d;
return (
);
})}
Картка ховається, коли сума оплат за останні {form.limitDays} {cdPluralDays(form.limitDays)} сягне ліміту.
)}
{/* binding — mutually exclusive */}
{[{ v: "none", l: "Немає" }, { v: "mono", l: "Mono авто-чек" }, { v: "supplier", l: "Постачальник" }].map(o => (
))}
{bindMode === "mono" && (
set({ monoSenderId: v })} placeholder="Оберіть ФОПа"
options={(senders || []).map(s => ({ value: s.id, label: s.label + (s.hasMono ? "" : " (без mono-токена)") }))}/>
)}
{bindMode === "supplier" && (
set({ supplierKey: v })} placeholder="Оберіть постачальника"
options={(suppliers || []).map(s => ({ value: s, label: s + (((supplierCur || {})[s] === "$" || String((supplierCur || {})[s]).toUpperCase() === "USD") ? " ($)" : "") }))}/>
{(() => {
const sc = (supplierCur || {})[form.supplierKey];
const isUsd = sc === "$" || String(sc).toUpperCase() === "USD";
if (!isUsd) return null;
return (
set({ rate: v })} placeholder="41.5" mono inputMode="decimal"/>
);
})()}
)}
{bindMode === "none" && (
Без авто-перевірки — оплати підтверджує власник вручну в журналі.
)}
set({ note: v })} placeholder="Напр. основна картка для PS5"/>
{/* footer */}
{(serverErr || Object.keys(errors).length > 0) && (
{serverErr || "Перевірте поля"}
)}
0) ? "0 0 auto" : 1 }}/>
);
}
// ════════════════════════════════════════════════════════════════════════════
// CARD DETAIL — slide-in panel: this card's analytics + payments only
// (scoped analytics computed client-side from full journal, per handoff)
// ════════════════════════════════════════════════════════════════════════════
function CdCardDetail({ card, journal, isMobile, onClose, onConfirm, onCancel, onEdit }) {
const [days, setDays] = cdUseState(30);
const [filter, setFilter] = cdUseState("all");
const theme = cdBankTheme(card.bank);
const noLimit = !card.limitAmount || card.limitAmount <= 0;
const remaining = noLimit ? null : (card.remaining != null ? card.remaining : Math.max(0, card.limitAmount - card.used));
const pct = noLimit ? 0 : Math.min(1, (card.used || 0) / card.limitAmount);
const tone = cdLimitTone(pct);
const all = journal.filter(e => e.cardId === card.id);
const within = all.filter(e => cdDaysAgo(e.createdAt) <= days);
const sum = (st) => within.filter(e => e.status === st).reduce((a, e) => a + (e.amount || 0), 0);
const cnt = (st) => within.filter(e => e.status === st).length;
// confirmed breakdown by manager
const byMgr = {};
within.filter(e => e.status === "confirmed").forEach(e => { byMgr[e.manager] = (byMgr[e.manager] || 0) + (e.amount || 0); });
const mgrs = Object.entries(byMgr).map(([m, s]) => ({ m, s })).sort((a, b) => b.s - a.s);
const maxM = Math.max(1, ...mgrs.map(x => x.s));
const counts = {
all: all.length,
waiting: all.filter(e => e.status === "waiting").length,
receipt_sent: all.filter(e => e.status === "receipt_sent").length,
confirmed: all.filter(e => e.status === "confirmed").length,
};
const rows = all
.filter(e => filter === "all" ? true : e.status === filter)
.sort((a, b) => ((b.overdue ? 1 : 0) - (a.overdue ? 1 : 0)) || (cdDaysAgo(a.createdAt) - cdDaysAgo(b.createdAt)));
const overdueN = all.filter(e => e.overdue).length;
return (
{/* header */}
Оплати картки
•{cdLast4(cdNumber(card))} · {theme.label} · {card.holder}
{/* body */}
{/* compact plastic */}
{cdNumGrouped(card)}
{card.monoSenderId && }
{card.supplierKey && }
{noLimit ? "Ліміт" : "Залишок"}
{noLimit ? "Без ліміту" : cdFmtUAH(remaining)}
{!noLimit &&
{cdFmtBare(card.limitAmount)} ₴
вікно {card.limitDays} {cdPluralDays(card.limitDays)}
}
{!noLimit && (
0 ? 4 : 0) + "%", background: tone, borderRadius: 999 }}/>
)}
{/* period + stats */}
Прийнято за період
{[7, 30, 90].map(d => (
))}
{/* by manager */}
{mgrs.length > 0 && (
Підтверджено по менеджерах
)}
{/* this card's journal */}
Журнал картки
{overdueN > 0 && (
{overdueN} прострочено
)}
setFilter("all")} count={counts.all}>Всі
setFilter("waiting")} count={counts.waiting} tone={CD_EXP.waiting.color}>Очікуємо
setFilter("receipt_sent")} count={counts.receipt_sent} tone={CD_EXP.receipt_sent.color}>Скрін
setFilter("confirmed")} count={counts.confirmed} tone={CD_EXP.confirmed.color}>Підтв.
{rows.length === 0 ? (
Оплат за цим фільтром немає
) : (
{rows.map(e => )}
)}
);
}
// ════════════════════════════════════════════════════════════════════════════
// STATES — skeleton / empty / error
// ════════════════════════════════════════════════════════════════════════════
function CdSkeletonCard() {
return (
);
}
function CdEmptyCards({ onAdd }) {
return (
Карток ще немає
Додайте картку, щоб менеджери могли видавати реквізити в замовленнях.
);
}
function CdErrorState({ onRetry, message }) {
return (
Не вдалося завантажити картки
{message &&
{message}}
);
}
// ════════════════════════════════════════════════════════════════════════════
// MAIN — window.Cards (root component, prop { isMobile })
// ════════════════════════════════════════════════════════════════════════════
function Cards({ isMobile }) {
const [state, setState] = cdUseState("loading"); // loading | ready | error
const [errMsg, setErrMsg] = cdUseState("");
const [cards, setCards] = cdUseState([]);
const [journal, setJournal] = cdUseState([]);
const [an, setAn] = cdUseState(null);
const [anDays, setAnDays] = cdUseState(30);
const [senders, setSenders] = cdUseState([]);
const [suppliers, setSuppliers] = cdUseState([]);
const [supplierCur, setSupplierCur] = cdUseState({}); // ім'я → валюта балансу ('₴'/'$')
const [editing, setEditing] = cdUseState(null); // null | form-object
const [isNew, setIsNew] = cdUseState(false);
const [confirmId, setConfirmId] = cdUseState(null);
const [copiedId, setCopiedId] = cdUseState(null);
const [onlyActive, setOnlyActive] = cdUseState(false);
const [detailId, setDetailId] = cdUseState(null);
const [toggleBusy, setToggleBusy] = cdUseState(null);
const load = () => {
setState(s => (s === "ready" ? s : "loading"));
cdJson("/api/cards")
.then(j => { setCards(j.cards || []); setJournal(j.journal || []); setState("ready"); })
.catch(e => { setErrMsg(e.message); setState("error"); });
};
const loadAnalytics = () => {
cdJson("/api/cards/analytics?days=" + anDays).then(setAn).catch(() => {});
};
cdUseEffect(load, []);
cdUseEffect(loadAnalytics, [anDays]);
cdUseEffect(() => {
cdJson("/api/np/shipping/senders").then(j => setSenders((j.senders || []).map(s => ({ id: s.id, label: s.label, hasMono: !!s.hasMono })))).catch(() => {});
// формат бота: { ok, data: { "Ім'я постачальника": конфіг } } → список імен з Object.keys(data)
cdJson("/api/suppliers").then(j => {
const data = (j && j.data) || {};
setSuppliers(Object.keys(data));
const cur = {}; for (const [k, v] of Object.entries(data)) cur[k] = (v && v.currency) || "₴";
setSupplierCur(cur);
}).catch(() => {});
}, []);
const reload = () => { setTimeout(() => { load(); loadAnalytics(); }, 600); };
const pendingByCard = (cardId) => journal.filter(e => e.cardId === cardId).length;
const waitingByCard = (cardId) => journal.filter(e => e.cardId === cardId && (e.status === "waiting" || e.status === "receipt_sent")).length;
const openDetail = (c) => setDetailId(c.id);
const openNew = () => { setEditing(cdBlankForm()); setIsNew(true); };
const openEdit = (c) => { setEditing(cdFormFromCard(c)); setIsNew(false); };
const fromDetailEdit = (c) => { setDetailId(null); openEdit(c); };
const closeForm = () => { setEditing(null); setIsNew(false); };
const onSaved = () => { closeForm(); reload(); };
const toggle = (c) => {
setToggleBusy(c.id);
cdJson("/api/cards/" + c.id, { method: "PUT", ...cdBody({ active: !c.active }) })
.then(() => { setToggleBusy(null); reload(); }) // бот асинхронно постить/видаляє → перезавантаження з затримкою
.catch(e => { setToggleBusy(null); setErrMsg(e.message); setState("error"); });
};
const remove = (id) => {
cdJson("/api/cards/" + id, { method: "DELETE" })
.then(() => { setConfirmId(null); load(); loadAnalytics(); })
.catch(e => { setConfirmId(null); window.alert(e.message); });
};
const copy = (c) => {
const digits = cdNumber(c).replace(/\D/g, "");
if (typeof copyText === "function") copyText(digits);
else if (navigator.clipboard) navigator.clipboard.writeText(digits).catch(() => {});
setCopiedId(c.id);
setTimeout(() => setCopiedId(cur => cur === c.id ? null : cur), 1600);
};
const confirmExp = (e) => {
if (!window.confirm(`Підтвердити отримання ${cdFmtBare(e.amount)} ₴ по заказу №${e.orderId}?`)) return;
cdJson(`/api/cards/expectations/${e.id}/confirm`, { method: "POST" }).then(() => { load(); loadAnalytics(); }).catch(er => window.alert(er.message));
};
const cancelExp = (e) => {
if (!window.confirm(`Скасувати очікування ${cdFmtBare(e.amount)} ₴ по заказу №${e.orderId}?`)) return;
cdJson(`/api/cards/expectations/${e.id}/cancel`, { method: "POST" }).then(() => { load(); loadAnalytics(); }).catch(er => window.alert(er.message));
};
const activeCount = cards.filter(c => c.active).length;
const overdueN = journal.filter(e => e.overdue).length;
const detailCard = cards.find(c => c.id === detailId) || null;
const shownCards = onlyActive ? cards.filter(c => c.active) : cards;
const sortedCards = [...shownCards].sort((a, b) => ((b.active ? 1 : 0) - (a.active ? 1 : 0)));
const pad = isMobile ? 16 : 24;
return (
{/* ── header ── */}
{!isMobile && (
)}
Картки для оплати
Увімкнена картка → плашка в замовленнях + повідомлення в Telegram-топіку
{!isMobile &&
}
{/* ── summary strip ── */}
{state === "ready" && cards.length > 0 && (
{cards.length} {cdPluralCards(cards.length)} · {activeCount} увімкнено
{overdueN > 0 && (
{overdueN} прострочених очікувань
)}
)}
{/* ── cards grid ── */}
{state === "loading" && [0, 1, 2].map(i => )}
{state === "error" && }
{state === "ready" && cards.length === 0 && }
{state === "ready" && sortedCards.map(c => (
setConfirmId(null)}
onDelete={() => remove(c.id)} copied={copiedId === c.id}/>
))}
{/* ── analytics + journal ── */}
{state === "ready" && cards.length > 0 && (
)}
{editing &&
}
{detailCard && (
setDetailId(null)} onConfirm={confirmExp} onCancel={cancelExp} onEdit={fromDetailEdit}/>
)}
);
}
window.Cards = Cards;