setHover(true)} onMouseLeave={() => { setHover(false); setConfirm(false); }} style={{
display: "flex", gap: 12, alignItems: "center", padding: "5px 24px",
borderBottom: expanded ? "1px solid var(--border-default)" : "1px solid var(--border-subtle)",
background: expanded ? "var(--bg-hover)" : hover ? "var(--bg-hover)" : "transparent",
}}>
{confirm && (
<>
setConfirm(false)} style={{ position: "fixed", inset: 0, zIndex: 14 }} />
Видалити рядок?
«{it.name}» зникне з таблиці складу назавжди.
)}
{list.map(w => {
const on = active === w.key;
return (
);
})}
);
}
function AnHead({ icon, title, right }) {
return (
);
}
const anCard = { background: "var(--bg-raised)", border: "1px solid var(--border-subtle)", borderRadius: 10, padding: 14, display: "flex", flexDirection: "column", minWidth: 0 };
function AnalyticsPanel({ data, item }) {
if (!data) {
return (
Аналітика по «{item.name}»…
);
}
const { horoshop, hotline, suppliers } = data;
const cheapest = suppliers[0];
return (
{fmtUAH(horoshop.price)}
роздрібна ціна продажу
{horoshop.url && horoshop.url !== "#" &&
Картка товару}
всі {hotline.total} : null} />
{!hotline.found ? (
На Hotline не знайдено
) : (
<>
від
{fmtUAH(hotline.offers[0] && hotline.offers[0].price)}
· наша позиція
#{hotline.ourRank}
{hotline.offers.map((o, i) => (
#{o.rank}
{o.shop}{o.us ? " · ми" : ""}
{fmtUAH(o.price)}
))}
{suppliers.length === 0 ? (
У постачальників не знайдено
) : (
{suppliers.map((s, i) => {
const best = s === cheapest;
return (
{s.label}
{s.offerArt}
{s.stock ? "є" : "немає"}
{fmtUAH(s.uah)}
);
})}
)}
);
}
function AddProductModal({ wh, onClose, onAdd }) {
const cur = wh.currency;
const [form, setForm] = useState({ article: "", name: "", price: "", stock: "" });
const [busy, setBusy] = useState(false);
const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
const valid = form.article.trim() && form.name.trim();
const submit = () => { if (!valid || busy) return; setBusy(true); onAdd(form, () => setBusy(false)); };
const field = (label, key, opts = {}) => (
);
return (
e.stopPropagation()} style={{ width: 460, maxWidth: "92vw", background: "var(--bg-panel)", border: "1px solid var(--border-default)", borderRadius: 14, boxShadow: "var(--shadow-2)", overflow: "hidden", animation: "skSheetUp 180ms ease" }}>
Новий товар
Склад «{wh.label}» · ціна у {CUR_LABEL[cur]}
{field("Артикул", "article", { req: true, ph: "DS-1200", autoFocus: true })}
{field("Назва товару", "name", { req: true, ph: "iPhone 15 Pro 256GB…" })}
{field("Ціна", "price", { num: true, ph: "0", sym: cur === "USD" ? "$" : "₴" })}
{field("Первинний залишок", "stock", { num: true, ph: "0" })}
Запис у A,B,C,D · Продано (E) — 0 · Залишок/Сума — формули
);
}
function SkladDesktop() {
const [whList, setWhList] = useState([]);
const [active, setActive] = useState(null);
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);
const [query, setQuery] = useState("");
const [saving, setSaving] = useState(null);
const [toast, setToast] = useState(null);
const [expanded, setExpanded] = useState(null);
const [analytics, setAnalytics] = useState({});
const [addOpen, setAddOpen] = useState(false);
const wh = whList.find(w => w.key === active);
const cur = (wh && wh.currency) || "UAH";
const showToast = (text, icon = "check-circle", tone = "var(--success)") => { setToast({ text, icon, tone }); setTimeout(() => setToast(null), 2600); };
const loadItems = async (key) => {
setLoading(true);
try { setItems(await API.warehouseItems(key)); }
catch (e) { setItems([]); showToast(e.message || "Помилка завантаження", "alert-triangle", "var(--danger)"); }
finally { setLoading(false); }
};
useEffect(() => {
let alive = true;
API.warehouses().then(list => {
if (!alive) return;
setWhList(list);
const first = list[0] && list[0].key;
if (first) { setActive(first); loadItems(first); } else setLoading(false);
}).catch(e => { if (alive) { setLoading(false); showToast(e.message || "Помилка", "alert-triangle", "var(--danger)"); } });
return () => { alive = false; };
}, []);
const pickWh = key => { if (key === active) return; setActive(key); setQuery(""); setExpanded(null); setAnalytics({}); loadItems(key); };
const toggleAnalytics = it => {
if (expanded === it.row) { setExpanded(null); return; }
setExpanded(it.row);
if (analytics[it.row] === undefined) loadAnalytics(it, active).then(data => setAnalytics(a => ({ ...a, [it.row]: data })));
};
const onEdit = async (it, field, value) => {
setSaving(`${it.row}:${field}`);
try {
const updated = await API.warehouseUpdate(active, { row: it.row, field, value });
setItems(list => list.map(x => x.row === it.row ? updated : x));
showToast(field === "price" ? `Ціну оновлено · ${it.article} · ${fmtMoney(value, cur)}` : `Залишок оновлено · ${it.article} · первинний ${fmtInt(value)}`);
} catch (e) { showToast(e.message || "Помилка збереження", "alert-triangle", "var(--danger)"); }
finally { setSaving(null); }
};
const onAdd = async (form, done) => {
try {
const it = await API.warehouseAdd(active, { article: form.article.trim(), name: form.name.trim(), price: parseFloat(String(form.price).replace(",", ".")) || 0, stock: parseInt(form.stock, 10) || 0 });
setItems(list => [it, ...list]); setAddOpen(false);
showToast(`Додано · ${it.article} · ${String(it.name).slice(0, 28)}`);
} catch (e) { showToast(e.message || "Помилка додавання", "alert-triangle", "var(--danger)"); }
finally { done && done(); }
};
const onDelete = async it => {
const snapshot = items;
setItems(list => list.filter(x => x.row !== it.row));
if (expanded === it.row) setExpanded(null);
try {
await API.warehouseDelete(active, it.row);
showToast(`Товар видалено · ${it.article}`, "trash-2", "var(--danger)");
setItems(await API.warehouseItems(active)); // рядки нижче зсунулись
} catch (e) { setItems(snapshot); showToast(e.message || "Помилка видалення", "alert-triangle", "var(--danger)"); }
};
const realItems = useMemo(() => items.filter(it => !it.isCategory), [items]);
const list = useMemo(() => {
const q = query.trim().toLowerCase();
if (!q) return items;
return items.filter(it => !it.isCategory && ((it.name || "").toLowerCase().includes(q) || (it.article || "").toLowerCase().includes(q)));
}, [items, query]);
const totalSum = useMemo(() => realItems.reduce((s, it) => s + calcSum(it), 0), [realItems]);
return (
Склад
Власні склади
{whList.length > 0 &&
}
Продано — з бота · Залишок/Сума — формули
setQuery(e.target.value)} placeholder="Пошук — назва або артикул…" style={{ width: "100%", height: 38, boxSizing: "border-box", padding: "0 12px 0 38px", background: "var(--bg-panel)", color: "var(--fg-primary)", border: "1px solid var(--border-default)", borderRadius: 9, fontSize: 13, outline: "none", fontFamily: "inherit" }}
onFocus={e => e.target.style.borderColor = "var(--accent)"} onBlur={e => e.target.style.borderColor = "var(--border-default)"} />
Товарів
{fmtInt(realItems.length)}
Сума на складі · {CUR_LABEL[cur]}
{fmtMoney(totalSum, cur)}
{loading ? (
Завантаження залишків{wh ? ` · ${wh.label}` : ""}…
) : list.length === 0 ? (
{query ? `Нічого не знайдено за «${query}»` : "Склад порожній"}
{query ? "Спробуйте інший запит" : "Додайте перший товар"}
{query &&
}
) : list.map(it => it.isCategory ? (
{it.name}
) : (
|
))}
{wh ? wh.label : "—"} · {fmtInt(list.length)} {list.length === 1 ? "позиція" : "позицій"}{query ? ` з ${realItems.length}` : ""}
Ціна та Первинний — редагуються · Enter або клік поза полем
{addOpen && wh &&
setAddOpen(false)} onAdd={onAdd} />}
);
}
// ======================= MOBILE ============================================
function FieldEdit({ label, value, money, cur, saving, onCommit }) {
const [draft, setDraft] = useState(String(value));
const [focus, setFocus] = useState(false);
useEffect(() => { if (!focus) setDraft(String(value)); }, [value, focus]);
const commit = () => {
setFocus(false);
const n = parseFloat(String(draft).replace(",", "."));
if (!isNaN(n) && n >= 0 && n !== value) onCommit(n); else setDraft(String(value));
};
return (
);
}
function FieldRead({ label, value, color }) {
return (
);
}
function ItemCardM({ it, cur, savingField, onEdit, onAnalytics, onDelete }) {
const final = calcFinal(it), sum = calcSum(it);
const out = final <= 0, low = final > 0 && final <= 5;
const dotColor = out ? "var(--fg-disabled)" : low ? "var(--warning)" : "var(--success)";
return (
onEdit(it, "price", v)} />
onEdit(it, "stock", v)} />
);
}
function WarehouseSwitchM({ list, active, onPick }) {
return (
{list.map(w => {
const on = active === w.key;
return (
);
})}
);
}
function BottomSheet({ onClose, heightPct = 90, children }) {
const [drag, setDrag] = useState(0);
const start = useRef(null);
const onDown = e => { start.current = (e.touches ? e.touches[0].clientY : e.clientY); };
const onMove = e => { if (start.current == null) return; const y = (e.touches ? e.touches[0].clientY : e.clientY); setDrag(Math.max(0, y - start.current)); };
const onUp = () => { if (drag > 110) onClose(); setDrag(0); start.current = null; };
return (
);
}
function SheetHead({ title, sub, onClose }) {
return (
);
}
const mAnLabel = { fontSize: 10.5, fontWeight: 600, letterSpacing: ".05em", textTransform: "uppercase", color: "var(--fg-muted)", display: "flex", alignItems: "center", gap: 6, marginBottom: 10 };
function AnalyticsSheet({ item, data, onClose }) {
return (
{!data ? (
Завантаження аналітики…
) : (
<>
На сайті · Horoshop
{fmtUAH(data.horoshop.price)}
роздрібна
Hotline
{data.hotline.found && всі {data.hotline.total}}
{!data.hotline.found ? (
На Hotline не знайдено
) : (
<>
від
{fmtUAH(data.hotline.offers[0] && data.hotline.offers[0].price)}
· наша
#{data.hotline.ourRank}
{data.hotline.offers.map((o, i) => (
#{o.rank}
{o.shop}{o.us ? " · ми" : ""}
{fmtUAH(o.price)}
))}
)}
У постачальників · {data.suppliers.length}
{data.suppliers.length === 0 ? (
Не знайдено
) : (
{data.suppliers.map((s, i) => {
const best = i === 0;
return (
{s.label}
{s.stock ? "є" : "немає"}
{fmtUAH(s.uah)}
);
})}
)}
)}
{field("Артикул", "article", { req: true, ph: "DS-1200" })}
{field("Назва товару", "name", { req: true, ph: "iPhone 15 Pro 256GB…" })}
{field("Ціна", "price", { num: true, ph: "0", sym: cur === "USD" ? "$" : "₴" })}
{field("Первинний", "stock", { num: true, ph: "0" })}
Видалити товар?
«{item.name}» зникне з таблиці складу назавжди (рядок видаляється).
);
}
function SkladMobile({ onBack }) {
const [whList, setWhList] = useState([]);
const [active, setActive] = useState(null);
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);
const [query, setQuery] = useState("");
const [saving, setSaving] = useState(null);
const [toast, setToast] = useState(null);
const [sheet, setSheet] = useState(null);
const [analytics, setAnalytics] = useState({});
const wh = whList.find(w => w.key === active);
const cur = (wh && wh.currency) || "UAH";
const showToast = (text, icon = "check-circle", tone = "var(--success)") => { setToast({ text, icon, tone }); setTimeout(() => setToast(null), 2400); };
const loadItems = async (key) => {
setLoading(true);
try { setItems(await API.warehouseItems(key)); }
catch (e) { setItems([]); showToast(e.message || "Помилка", "alert-triangle", "var(--danger)"); }
finally { setLoading(false); }
};
useEffect(() => {
let alive = true;
API.warehouses().then(list => {
if (!alive) return;
setWhList(list); const first = list[0] && list[0].key;
if (first) { setActive(first); loadItems(first); } else setLoading(false);
}).catch(e => { if (alive) { setLoading(false); showToast(e.message || "Помилка", "alert-triangle", "var(--danger)"); } });
return () => { alive = false; };
}, []);
const pickWh = key => { if (key === active) return; setActive(key); setQuery(""); setSheet(null); setAnalytics({}); loadItems(key); };
const openAnalytics = it => {
setSheet({ type: "an", item: it });
if (analytics[it.row] === undefined) loadAnalytics(it, active).then(data => setAnalytics(a => ({ ...a, [it.row]: data })));
};
const doDelete = async it => {
const snapshot = items;
setItems(list => list.filter(x => x.row !== it.row)); setSheet(null);
try { await API.warehouseDelete(active, it.row); showToast(`Товар видалено · ${it.article}`, "trash-2", "var(--danger)"); setItems(await API.warehouseItems(active)); }
catch (e) { setItems(snapshot); showToast(e.message || "Помилка видалення", "alert-triangle", "var(--danger)"); }
};
const doAdd = async (form, done) => {
try {
const it = await API.warehouseAdd(active, { article: form.article.trim(), name: form.name.trim(), price: parseFloat(String(form.price).replace(",", ".")) || 0, stock: parseInt(form.stock, 10) || 0 });
setItems(list => [it, ...list]); setSheet(null); showToast(`Додано · ${it.article}`);
} catch (e) { showToast(e.message || "Помилка", "alert-triangle", "var(--danger)"); }
finally { done && done(); }
};
const onEdit = async (it, field, value) => {
setSaving(`${it.row}:${field}`);
try {
const updated = await API.warehouseUpdate(active, { row: it.row, field, value });
setItems(list => list.map(x => x.row === it.row ? updated : x));
showToast(field === "price" ? `Ціну оновлено · ${it.article}` : `Залишок оновлено · ${it.article}`);
} catch (e) { showToast(e.message || "Помилка", "alert-triangle", "var(--danger)"); }
finally { setSaving(null); }
};
const realItems = useMemo(() => items.filter(it => !it.isCategory), [items]);
const list = useMemo(() => {
const q = query.trim().toLowerCase();
if (!q) return items;
return items.filter(it => !it.isCategory && ((it.name || "").toLowerCase().includes(q) || (it.article || "").toLowerCase().includes(q)));
}, [items, query]);
const totalSum = useMemo(() => realItems.reduce((s, it) => s + calcSum(it), 0), [realItems]);
return (
{onBack &&
}
Склад
Власні склади
{whList.length > 0 &&
}
Товарів
{fmtInt(realItems.length)}
Сума на складі · {CUR_LABEL[cur]}
{fmtMoney(totalSum, cur)}
setQuery(e.target.value)} placeholder="Назва або артикул…" style={{ width: "100%", height: 44, boxSizing: "border-box", padding: "0 12px 0 36px", background: "var(--bg-panel)", color: "var(--fg-primary)", border: "1px solid var(--border-default)", borderRadius: 12, fontSize: 14, outline: "none", fontFamily: "inherit" }} />
{loading ? (
Завантаження{wh ? ` · ${wh.label}` : ""}…
) : list.length === 0 ? (
{query ? `Нічого за «${query}»` : "Склад порожній"}
{query ? "Спробуйте інший запит" : "Додайте перший товар"}
{query &&
}
) : (
<>
{list.filter(it => !it.isCategory).length}{query ? ` з ${realItems.length}` : ""} позицій
{list.map(it => it.isCategory ? (
{it.name}
) : (
setSheet({ type: "del", item: it2 })} />
))}
)}
{sheet && sheet.type === "an" &&
setSheet(null)} />}
{sheet && sheet.type === "add" && wh && setSheet(null)} onAdd={doAdd} />}
{sheet && sheet.type === "del" && setSheet(null)} onConfirm={doDelete} />}
);
}
// ======================= Блок «На складах зараз» (Банки) ====================
function StockOnHand({ onOpenWarehouse }) {
const [rows, setRows] = useState(null);
useEffect(() => { let a = true; API.warehousesSummary().then(d => { if (a) setRows(d || []); }).catch(() => { if (a) setRows([]); }); return () => { a = false; }; }, []);
return (
На складах зараз
Вартість залишків · окремо по валютах
{rows === null ? (
) : (
{rows.map((w, i) => {
// Клікабельний (з переходом на склад) лише якщо переданий onOpenWarehouse.
// У вкладці «Банки» це інфо-показник → рядок НЕ клікабельний (без курсора/ховера/шеврона).
const clickable = typeof onOpenWarehouse === "function";
const rowStyle = { display: "flex", alignItems: "center", gap: 12, padding: "13px 16px", border: 0, background: "transparent", fontFamily: "inherit", textAlign: "left", borderTop: i === 0 ? "none" : "1px solid var(--border-subtle)", cursor: clickable ? "pointer" : "default", width: "100%", boxSizing: "border-box" };
const inner = (<>
{w.label}
{fmtInt(w.count)} позицій
{fmtMoney(w.totalSum, w.currency)}
{CUR_LABEL[w.currency]}
{clickable &&
}
);
return clickable ? (
) : (
{inner}
);
})}
)}
Долар і гривня показані окремо — не сумуються в одну суму.
);
}
function Sklad({ isMobile, onBack }) { return isMobile ? : ; }
window.Sklad = Sklad;
window.StockOnHand = StockOnHand;
})();