Потрійна камера 48 Мп з 5× оптичним зумом, кнопка «Дія» та роз'єм USB-C. Корпус із титану — легший і міцніший.
✓ Офіційна гарантія Apple 12 міс ✓ Доставка по Україні ✓ Оплата частинами.
`,
2: `Marshall Major V — легендарні накладні навушники з фірмовим звуком та автономністю до 100 годин .
Бездротова зарядка, мультипоінт-підключення та аналоговий джойстик керування.
`,
3: `Samsung Galaxy S24 Ultra з пером S Pen, дисплеєм Dynamic AMOLED 2X 6.8″ та чипом Snapdragon 8 Gen 3.
Камера 200 Мп, рамка з титану та набір функцій Galaxy AI.
`,
4: `Sony PlayStation 5 Slim — оновлена компактна версія з дисководом 4K Blu-ray та SSD на 1 ТБ.
${name} — ${brand} ${catLabel.toLowerCase()} преміум-класу.
Офіційна гарантія, швидка доставка по Україні та оплата частинами.
`;
}
// ---- derive ----------------------------------------------------------------
function deriveProducts(SRC) { return SRC.map(p => {
const offers = (p.offers || []).map(o => ({ ...o, uah: toUAH(o.price, o.cur) }));
const inStock = offers.filter(o => o.stock);
const pool = inStock.length ? inStock : offers;
const best = pool.length ? pool.reduce((a, b) => (b.uah < a.uah ? b : a), pool[0]) : null;
const buy = best ? best.uah : null;
const margin = buy != null ? p.price - buy : null;
const marginPct = margin != null && p.price ? (margin / p.price) * 100 : null;
const marginRisk = marginPct != null && marginPct < TARGET_MARGIN;
const mods = (p.modifications || []).map(m => ({ ...m, swatch: m.swatch || swatchColor(m.modTitle) }));
const isParent = mods.length > 0;
const inStockVariants = mods.filter(m => m.presence === "in").length;
const hasOrphan = mods.some(m => m.orphan);
// зведена наявність групи
const groupPresence = isParent
? (inStockVariants === 0 ? "out" : "in")
: p.presence;
const noPhoto = p.images === 0;
const noDesc = !p.hasDesc;
const noChars = !p.hasChars;
const complete = !noPhoto && !noDesc && !noChars && p.showcase;
const discount = p.priceOld ? Math.round((1 - p.price / p.priceOld) * 100) : 0;
return {
...p, offers, best, buy, margin, marginPct, marginRisk,
supCount: offers.length, inStockCount: inStock.length,
mods, isParent, variantCount: mods.length, inStockVariants, hasOrphan,
groupPresence, noPhoto, noDesc, noChars, complete, discount,
catLabel: p.catLabel || (CAT[p.cat] && CAT[p.cat].label) || "",
catPath: p.catPath || (CAT[p.cat] && CAT[p.cat].path) || "",
description: (typeof p.description === "string" && p.description)
? p.description
: (p.hasDesc ? (DESCRIPTIONS[p.id] || genDesc(p.name, p.brand, (CAT[p.cat] && CAT[p.cat].label) || "", p.article)) : ""),
isNew: !!p.isNew, draft: !!p.draft,
};
}); }
let PRODUCTS = deriveProducts(RAW);
// ---- Summary плитки ---------------------------------------------------------
function buildSummary(P) {
return [
{ key: "all", label: "Всього товарів", value: P.length, tone: "neutral" },
{ key: "in", label: "В наявності", value: P.filter(p => p.groupPresence === "in").length, tone: "success" },
{ key: "out", label: "Немає в наявності", value: P.filter(p => p.groupPresence === "out").length, tone: "muted" },
// На сайті «немає», але Є в наявності у постачальників → можна повернути на сайт (панель повернення)
{ key: "return", label: "↩ Можна повернути", value: P.filter(p => p.groupPresence === "out" && p.offers.some(o => o.stock)).length, tone: "success", pulse: true },
{ key: "nophoto", label: "Без фото", value: P.filter(p => p.noPhoto).length, tone: "warning", pulse: true },
{ key: "nodesc", label: "Без опису", value: P.filter(p => p.noDesc).length, tone: "warning" },
{ key: "draft", label: "Чернетки", value: P.filter(p => p.draft).length, tone: "info" },
];
}
let SUMMARY = buildSummary(PRODUCTS);
// ---- Фільтри ----------------------------------------------------------------
// Опції «Категорія» і «Бренд» — з реальних товарів (унікальні значення).
function catOptionsFrom(P) {
const m = new Map();
for (const p of P) if (p.cat && !m.has(p.cat)) m.set(p.cat, p.catLabel || p.cat);
return [...m.entries()].sort((a, b) => String(a[1]).localeCompare(String(b[1]), "uk")).map(([key, label]) => ({ key, label }));
}
function brandOptionsFrom(P) {
return [...new Set(P.map(p => p.brand).filter(Boolean))].sort((a, b) => a.localeCompare(b, "uk")).map(b => ({ key: b, label: b }));
}
function buildFilterDefs(P) {
return {
sup: { label: "Постачальник", icon: "truck", options: SUP_ORDER.map(key => ({ key, label: (SUPPLIERS[key] || {}).label || key })) },
presence: { label: "Наявність", icon: "package", options: [{ key: "in", label: "В наявності" }, { key: "out", label: "Немає в наявності" }, { key: "order", label: "Під замовлення" }] },
cat: { label: "Категорія", icon: "folder-tree", options: catOptionsFrom(P) },
content: { label: "Контент", icon: "sparkles", options: [{ key: "nophoto", label: "Без фото" }, { key: "nodesc", label: "Без опису" }, { key: "nochars", label: "Без характеристик" }, { key: "complete", label: "Повна картка" }] },
brand: { label: "Бренд", icon: "tag", options: brandOptionsFrom(P) },
};
}
let FILTER_DEFS = buildFilterDefs(PRODUCTS);
// Перевстановити каталог реальними даними (з /api/catalog/products) — фронт сам derive.
function rebuildMeta() { SUMMARY = buildSummary(PRODUCTS); FILTER_DEFS = buildFilterDefs(PRODUCTS); }
function setCatalog(rawList) { PRODUCTS = deriveProducts(rawList || []); rebuildMeta(); }
// ----- parts.jsx -----
// ============================================================================
// Товари — спільні примітиви (Icon/Button/Avatar/Sidebar/TopBar з CRM-кіта)
// + каталогові чипи: фото-тайл · наявність · свотч кольору · бейджі контенту ·
// стопка постачальників · ціна зі знижкою.
// ============================================================================
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
setOpen(open === group ? null : group)} style={{
display: "inline-flex", alignItems: "center", gap: 7, height: 32, padding: "0 11px", borderRadius: 8, cursor: "pointer", fontFamily: "inherit",
background: on ? "var(--accent-soft)" : "var(--bg-panel)",
border: `1px solid ${on || open === group ? "var(--accent)" : "var(--border-default)"}`,
color: on ? "var(--accent)" : "var(--fg-secondary)", fontSize: 12.5, fontWeight: 500, whiteSpace: "nowrap",
}}>
{count} }
{open === group && (
<>
setOpen(null)} style={{ position: "fixed", inset: 0, zIndex: 8 }} />
{def.options.map(o => (
e.currentTarget.style.background = "var(--bg-hover)"}
onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
{o.label} }
))}
)}
);
}
function FilterBar({ filters, onToggle, onReset, count, total }) {
const [open, setOpen] = useState(null);
const chips = [];
Object.keys(FILTER_DEFS).forEach(group => {
const def = FILTER_DEFS[group];
Object.keys(filters[group] || {}).filter(k => filters[group][k]).forEach(k => {
const opt = def.options.find(o => o.key === k);
chips.push({ group, key: k, label: opt ? opt.label : k, sup: group === "sup" ? k : null });
});
});
const anyActive = chips.length > 0;
return (
{Object.keys(FILTER_DEFS).map(group => (
))}
{anyActive &&
}
{chips.map(c => (
{c.sup ? onToggle(c.group, c.key)} style={{ width: 17, height: 17, border: 0, borderRadius: "50%", background: "transparent", color: "var(--fg-muted)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}
onMouseEnter={e => { e.currentTarget.style.background = "var(--bg-hover)"; e.currentTarget.style.color = "var(--fg-primary)"; }}
onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--fg-muted)"; }}>
))}
{anyActive &&
Скинути }
{count} з {total}
);
}
// ---- Колонки ----------------------------------------------------------------
const COLS = [
["exp", 26], ["chk", 24], ["img", 44], ["art", 104], ["name", "flex"], ["cat", 150],
["price", 124], ["presence", 134], ["sup", 84], ["margin", 96], ["act", 60],
];
const COL_LABEL = { art: "Артикул", name: "Назва товару", cat: "Категорія", price: "Ціна", presence: "Наявність", sup: "Постач.", margin: "Маржа" };
const cellStyle = w => (w === "flex" ? { flex: "1 1 0", minWidth: 150 } : { flex: `0 0 ${w}px` });
const headCell = { fontSize: 10.5, fontWeight: 600, letterSpacing: ".04em", textTransform: "uppercase", color: "var(--fg-muted)" };
const RIGHT = ["margin"];
function TableHeader() {
return (
{COLS.map(([k, w]) => (
{COL_LABEL[k] || ""}
))}
);
}
// ---- Рядок товару -----------------------------------------------------------
function ProductRow({ p, selected, checked, expanded, onSelect, onCheck, onToggle, dense, showFlags = true, onAddMod, onMenu }) {
const mColor = p.margin != null ? marginColor(p.margin, p.marginPct) : "var(--fg-disabled)";
const pad = dense ? "7px 20px" : "11px 20px";
const [hover, setHover] = useState(false);
const can = p.isParent;
return (
<>
onSelect(p)} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
display: "flex", gap: 10, alignItems: "center", padding: pad,
borderBottom: expanded ? "1px solid var(--border-default)" : "1px solid var(--border-subtle)", cursor: "pointer",
background: selected ? "var(--bg-active)" : hover ? "var(--bg-hover)" : p.draft ? "rgba(99,102,241,.04)" : "transparent",
boxShadow: p.draft ? "inset 3px 0 0 var(--accent)" : "none",
}}>
{ e.stopPropagation(); if (can) onToggle(p.id); }}>
{can
?
e.stopPropagation()}>
{p.article}
{p.name}
{p.isNew &&
)}
{p.brand}
{showFlags && ((p.noPhoto || p.noDesc || p.noChars) ?
{p.catLabel}
{p.isParent
? {p.inStockVariants}/{p.variantCount} варіантів
{p.margin != null ? (
<>
{p.marginRisk && {fmtSigned(p.margin)}
{fmtPct(p.marginPct)}
) : — }
e.stopPropagation()}>
{hover && (
onAddMod(p)} style={actBtn}
onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.color = "var(--accent)"; }}
onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--border-default)"; e.currentTarget.style.color = "var(--fg-secondary)"; }}>
)}
onSelect(p)} />
{expanded && p.mods.map((m, i) =>
)}
{expanded && (
{ e.stopPropagation(); onAddMod(p); }} style={{ display: "inline-flex", alignItems: "center", gap: 7, height: 30, padding: "0 12px", borderRadius: 8, background: "transparent", border: "1px dashed var(--border-strong)", color: "var(--accent)", fontFamily: "inherit", fontSize: 12, fontWeight: 600, cursor: "pointer" }}>
)}
);
}
const actBtn = { width: 26, height: 26, border: "1px solid var(--border-default)", borderRadius: 7, background: "var(--bg-raised)", color: "var(--fg-secondary)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 };
// ---- Під-рядок: модифікація (варіант) ---------------------------------------
function VariantRow({ m, parent, last }) {
const [hover, setHover] = useState(false);
return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{
display: "flex", gap: 10, alignItems: "center", padding: "7px 20px",
borderBottom: "1px solid var(--border-subtle)", background: "var(--bg-base)",
}}>
{m.orphan ? "—" : m.article}
{m.modTitle}
{m.imgCount === 0 &&
e.stopPropagation()}>
{hover && (
<>
);
}
function EmptyState({ query, onReset }) {
return (
{query ? `Нічого не знайдено за «${query}»` : "Немає товарів за фільтрами"}
Спробуйте змінити запит або скинути фільтри
Скинути все
);
}
// ----- CatalogPanel.jsx -----
// ============================================================================
// Товари — деталь/редактор товару (бокова панель 560px). Секції:
// Основне · Опис · Характеристики · SEO · Постачальники · Модифікації.
// Низ — sticky-бар Зберегти / Скасувати з індикатором змін.
// ============================================================================
function SectionLabel({ children, right }) {
return (
{children}
{right}
);
}
function Field({ label, children, hint, w }) {
return (
{label}
{children}
{hint &&
{hint}
}
);
}
const inputStyle = {
width: "100%", boxSizing: "border-box", height: 38, padding: "0 11px",
background: "var(--bg-base)", color: "var(--fg-primary)", border: "1px solid var(--border-default)",
borderRadius: 8, fontSize: 13, fontFamily: "inherit", outline: "none",
};
const monoInput = { ...inputStyle, fontFamily: "var(--font-mono)", fontWeight: 600 };
function TextInput(props) {
const { mono, style, ...rest } = props;
return
e.target.style.borderColor = "var(--accent)"} onBlur={e => e.target.style.borderColor = "var(--border-default)"} />;
}
function Toggle({ on, onChange }) {
return (
onChange(!on)} style={{
width: 40, height: 23, borderRadius: 999, border: 0, cursor: "pointer", position: "relative", flexShrink: 0,
background: on ? "var(--accent)" : "var(--bg-raised)", transition: "background 150ms",
}}>
);
}
const iconBtnP = { width: 32, height: 32, border: 0, background: "transparent", color: "var(--fg-secondary)", borderRadius: 6, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 };
const langBtn = on => ({ height: 24, padding: "0 10px", borderRadius: 6, border: 0, cursor: "pointer", fontFamily: "inherit", fontSize: 11, fontWeight: 600, background: on ? "var(--bg-raised)" : "transparent", color: on ? "var(--fg-primary)" : "var(--fg-muted)", boxShadow: on ? "var(--shadow-1)" : "none" });
function LangSwitch({ lang, onChange }) {
return (
onChange("ua")} style={langBtn(lang === "ua")}>UA
onChange("ru")} style={langBtn(lang === "ru")}>RU
);
}
// ---- генерація демо-контенту ------------------------------------------------
const CHARS_BY_CAT = {
phones: [["Діагональ екрана", "6.7\""], ["Оперативна памʼять", "8 ГБ"], ["Вбудована памʼять", "256 ГБ"], ["Основна камера", "48 Мп"], ["Акумулятор", "4422 мА·год"]],
laptops: [["Процесор", "Apple M3 Pro"], ["Оперативна памʼять", "18 ГБ"], ["Накопичувач", "512 ГБ SSD"], ["Діагональ", "14.2\""], ["Маса", "1.6 кг"]],
audio: [["Тип", "Накладні"], ["Підключення", "Bluetooth 5.3"], ["Час роботи", "30 год"], ["Шумозаглушення", "Активне"], ["Маса", "238 г"]],
tablets: [["Діагональ", "11\""], ["Чип", "Apple M2"], ["Памʼять", "128 ГБ"], ["Wi-Fi", "Wi-Fi 6E"]],
console: [["Накопичувач", "1 ТБ SSD"], ["Привід", "Blu-ray 4K"], ["Комплект", "1 геймпад"]],
watch: [["Корпус", "49 мм Titanium"], ["Захист", "WR100 / IP6X"], ["Звʼязок", "GPS + Cellular"]],
acc: [["Сумісність", "Універсальна"], ["Матеріал", "Полікарбонат"], ["Колір", "Чорний"]],
};
function seoFor(p) {
return {
title: `${p.name} — купити в Digitalshop ✓ Гарантія`,
keywords: `${p.name.toLowerCase()}, ${p.brand.toLowerCase()}, купити ${p.catLabel.toLowerCase()}`,
description: `${p.name} за вигідною ціною ${fmtUAH(p.price)}. ✓ Офіційна гарантія ✓ Доставка по Україні ✓ Оплата частинами.`,
};
}
// ---- Рендер опису: CDN-посилання на фото → справжнє зображення --------------
// Підтримує
, markdown  та «голі» URL фото у тексті.
const SITE_ORIGIN = "https://digital-shop.com.ua";
// абсолютні (http/https), протокол-відносні (//cdn…) та відносні (/content/…) посилання на фото
const IMG_URL_RE = /((?:https?:\/\/|\/\/?)[^\s"'<>)]+\.(?:jpe?g|png|webp|gif|avif)(?:\?[^\s"'<>)]*)?)/i;
const absImg = u => { u = String(u || "").trim(); if (/^https?:\/\//i.test(u)) return u; if (u.startsWith("//")) return "https:" + u; if (u.startsWith("/")) return SITE_ORIGIN + u; return u; };
function DescImage({ url, alt }) {
const [state, setState] = useState("loading"); // loading | ok | err
const file = (url.split("/").pop() || url).split("?")[0];
return (
{state !== "ok" && (
// Плейсхолдер — оверлей ПОВЕРХ
, поки той вантажиться/якщо помилка.
// НЕ ховаємо сам
через display:none у стані loading — інакше lazy-img без
// layout-box ніколи не підвантажиться (onLoad не спрацює, картинка «зависає» на шляху).
{state === "err" ? "Фото з сервера недоступне" : "Фото з сервера"}
{file}
)}
setState("ok")} onError={() => setState("err")}
style={{ display: state === "err" ? "none" : "block", width: "100%", borderRadius: 10 }} />
);
}
function renderDescription(html) {
if (!html) return null;
const norm = String(html)
.replace(/
]*src=["']([^"']+)["'][^>]*>/gi, "\n$1\n")
.replace(/!\[[^\]]*\]\(([^)]+)\)/g, "\n$1\n");
const parts = norm.split(IMG_URL_RE);
return parts.map((seg, i) => {
if (!seg || !seg.trim()) return null;
if (IMG_URL_RE.test(seg) && /^(?:https?:\/\/|\/)/.test(seg.trim())) return
;
});
}
// ---- Галерея фото (велика, для повноекранного редактора) --------------------
function GalleryLarge({ count, urls }) {
const imgs = Array.isArray(urls) ? urls.filter(Boolean) : [];
const total = imgs.length || count;
const noPhoto = !total;
const [main, setMain] = useState(0);
const [err, setErr] = useState(false);
const mainSrc = imgs[main];
const showMain = !!mainSrc && !err;
return (
{showMain
?
setErr(true)} style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
:
{noPhoto ? "немає фото" : `фото ${main + 1} з ${total}`}
}
{Array.from({ length: Math.max(0, total) }).map((_, i) => (
{ setMain(i); setErr(false); }} style={{ flexShrink: 0, padding: 0, border: 0, background: "transparent", cursor: "pointer", borderRadius: 9, outline: i === main ? "2px solid var(--accent)" : "none", outlineOffset: 1 }}>
))}
);
}
const TABS = [
{ key: "main", label: "Основне", icon: "package" },
{ key: "desc", label: "Опис", icon: "align-left" },
{ key: "chars", label: "Характеристики", icon: "list" },
{ key: "seo", label: "SEO", icon: "search" },
{ key: "sup", label: "Постачальники", icon: "truck" },
{ key: "mods", label: "Варіанти", icon: "layers" },
];
function DetailPanel({ product, onClose, dense, onToast, onAddMod }) {
const [tab, setTab] = useState("main");
const [lang, setLang] = useState("ua");
const [name, setName] = useState(product.name);
const [price, setPrice] = useState(product.price);
const [priceOld, setPriceOld] = useState(product.priceOld || "");
const [presence, setPresence] = useState(presBaseline(product));
const [showcase, setShowcase] = useState(product.showcase);
const [sourceSup, setSourceSup] = useState(product.supplierPrefix || ""); // реальний постачальник з сайту
const [activeVar, setActiveVar] = useState(0);
const [saved, setSaved] = useState(false);
const [editDesc, setEditDesc] = useState(false);
const [confirm, setConfirm] = useState(null); // { changes:[{label,from,to}], payload }
const [busy, setBusy] = useState(false);
useEffect(() => {
setTab("main"); setLang("ua"); setName(product.name); setPrice(product.price);
setPriceOld(product.priceOld || ""); setPresence(presBaseline(product)); setShowcase(product.showcase);
setSourceSup(product.supplierPrefix || ""); setActiveVar(0); setSaved(false); setEditDesc(false);
}, [product.id]);
const baseSup = product.supplierPrefix || "";
useEffect(() => {
const onKey = e => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [onClose]);
const dirty = name !== product.name || price !== product.price || (priceOld || "") !== (product.priceOld || "") || presence !== presBaseline(product) || showcase !== product.showcase || sourceSup !== baseSup;
const seo = seoFor(product);
const chars = CHARS_BY_CAT[product.cat] || CHARS_BY_CAT.acc;
// Зміна наявності/полів на сайті — ТІЛЬКИ після підтвердження. Нічого не пишемо без «Підтвердити».
const save = () => {
const changes = [];
const payload = { article: product.article };
if (name !== product.name) { changes.push({ label: "Назва", from: product.name, to: name }); payload.title = { ua: name }; }
if (presence !== presBaseline(product)) { changes.push({ label: "Наявність", from: (PRESENCE[product.presence] || {}).label || "—", to: HS_PRES_BY_KEY[presence].label }); payload.presence = HS_PRES_BY_KEY[presence].presence; }
if (price !== product.price) { changes.push({ label: "Ціна", from: fmtUAH(product.price), to: fmtUAH(price) }); payload.price = Number(price) || 0; }
if ((priceOld || "") !== (product.priceOld || "")) { changes.push({ label: "Стара ціна", from: product.priceOld ? fmtUAH(product.priceOld) : "—", to: priceOld ? fmtUAH(priceOld) : "—" }); payload.price_old = priceOld ? Number(priceOld) : 0; }
if (showcase !== product.showcase) { changes.push({ label: "На вітрині", from: product.showcase ? "так" : "ні", to: showcase ? "так" : "ні" }); payload.display_in_showcase = showcase ? 1 : 0; }
if (sourceSup !== baseSup) { changes.push({ label: "Постачальник", from: (SUPPLIERS[baseSup] || {}).label || baseSup || "—", to: (SUPPLIERS[sourceSup] || {}).label || sourceSup || "—" }); payload.sourceSup = sourceSup; }
if (!changes.length) return;
setConfirm({ changes, payload });
};
const doSave = async () => {
if (!confirm || busy) return;
setBusy(true);
try {
const r = await fetch("/api/horoshop/import", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ products: [confirm.payload] }) });
const j = await r.json().catch(() => ({}));
if (j && j.ok) {
// оновлюємо «базу» порівняння, щоб зник прапор незбережених змін
product.name = name; product.price = price; product.priceOld = priceOld || null; product.presKey = presence; product.presence = presToCoarse(presence); product.showcase = showcase;
if (sourceSup !== baseSup) product.supplierPrefix = sourceSup;
setSaved(true); setConfirm(null); onToast && onToast(`Збережено на сайті · ${product.article}`); setTimeout(() => setSaved(false), 1800);
} else {
onToast && onToast(`Помилка: ${(j && (j.error || j.status)) || "не вдалося зберегти"}`); setConfirm(null);
}
} catch (e) { onToast && onToast("Помилка мережі: " + e.message); setConfirm(null); }
finally { setBusy(false); }
};
return (
{/* TOP BAR */}
{product.name}
{product.isNew &&
{product.catPath}
· {product.article}
{saved
?
: dirty ?
: null}
Картка на сайті
Закрити
{saved ? "Збережено" : "Зберегти зміни"}
{/* WORKSPACE */}
{/* LEFT — медіа + зведення */}
price ? Math.round((1 - price / priceOld) * 100) : 0} size={18} />
{product.best && (
закуп {fmtUAH(product.buy)}
{fmtPct(product.marginPct)}
)}
На вітрині
{/* RIGHT — вкладки + контент */}
{TABS.filter(t => t.key !== "mods" || product.isParent).map(t => {
const on = tab === t.key;
return (
setTab(t.key)} style={{
display: "inline-flex", alignItems: "center", gap: 7, height: 40, padding: "0 14px", border: 0, borderBottom: `2px solid ${on ? "var(--accent)" : "transparent"}`, marginBottom: -1, background: "transparent", color: on ? "var(--fg-primary)" : "var(--fg-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer", fontFamily: "inherit", whiteSpace: "nowrap", flexShrink: 0,
}}>
);
})}
{tab === "main" && (
<>
setName(e.target.value)} />
{CATEGORIES.map(c => {c.label} )}
{priceOld > price &&
Знижка {Math.round((1 - price / priceOld) * 100)}% · економія {fmtUAH(priceOld - price)}
}
Показувати на вітрині
Товар видно покупцям на сайті
)}
{tab === "desc" && (
<>
setEditDesc(false)} style={langBtn(!editDesc)}>Перегляд
setEditDesc(true)} style={langBtn(editDesc)}>HTML
)}>Опис товару · {lang.toUpperCase()}
{product.noDesc ? (
Опис ще не заповнено
Згенерувати опис (AI)
) : editDesc ? (
<>
{["bold", "italic", "list", "link", "image", "heading"].map(ic =>
`,
};
function genDesc(name, brand, catLabel, article) {
return `}-main.jpg)