);
}
function ModalHost({ modal, onClose }){
if (!modal) return null;
return (
e.stopPropagation()}>
{modal.title && (
{modal.title}
{modal.sub &&
{modal.sub}
}
)}
{modal.body}
{modal.foot &&
{modal.foot}
}
);
}
// ============================================================
// Reusable UI primitives
// ============================================================
function StatusBadge({ status }){
const map = {
pago: { cls: "badge-ok", label: "Pago" },
pendente: { cls: "badge-warn", label: "Pendente" },
recusado: { cls: "badge-bad", label: "Recusado" },
expirado: { cls: "badge-mute", label: "Expirado" },
rascunho: { cls: "badge-mute", label: "Rascunho" },
ativo: { cls: "badge-ok", label: "Ativo" },
inativo: { cls: "badge-mute", label: "Inativo" },
};
const it = map[status] || { cls: "badge-mute", label: status };
return (
{it.label}
);
}
function MethodPill({ method }){
if (method === "pix") return Pix;
if (method === "card") return Cartão;
return {method};
}
// SVG line chart
function LineChart({ data, height = 220 }){
const w = 800;
const h = height;
const pad = 16;
const max = Math.max(...data);
const min = Math.min(...data);
const pts = data.map((v, i) => {
const x = pad + (i / (data.length - 1)) * (w - pad * 2);
const y = h - pad - ((v - min) / (max - min || 1)) * (h - pad * 2);
return [x, y];
});
const path = pts.map((p, i) => (i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`)).join(" ");
const area = `${path} L ${pts[pts.length - 1][0]} ${h - pad} L ${pts[0][0]} ${h - pad} Z`;
return (
);
}
// Mini sparkline for KPIs
function Sparkline({ data, width = 90, height = 30, color = "rgba(10,10,10,.45)" }){
const max = Math.max(...data), min = Math.min(...data);
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * width;
const y = height - ((v - min) / (max - min || 1)) * height;
return `${x},${y}`;
});
return (
);
}
// Fake QR (deterministic from seed string)
function FakeQR({ seed = "blkk" }){
const cells = 21;
let s = 0; for (const c of seed) s = (s * 31 + c.charCodeAt(0)) >>> 0;
const grid = [];
for (let y = 0; y < cells; y++){
for (let x = 0; x < cells; x++){
s = (s * 1103515245 + 12345) >>> 0;
const isFinder =
(x < 7 && y < 7) || (x > cells - 8 && y < 7) || (x < 7 && y > cells - 8);
const inFinder =
(x < 7 && y < 7 && (x === 0 || x === 6 || y === 0 || y === 6 || (x >= 2 && x <= 4 && y >= 2 && y <= 4))) ||
(x > cells - 8 && y < 7 && (x === cells - 7 || x === cells - 1 || y === 0 || y === 6 || (x >= cells - 5 && x <= cells - 3 && y >= 2 && y <= 4))) ||
(x < 7 && y > cells - 8 && (x === 0 || x === 6 || y === cells - 7 || y === cells - 1 || (x >= 2 && x <= 4 && y >= cells - 5 && y <= cells - 3)));
const on = isFinder ? inFinder : (s & 1) === 1;
grid.push(on);
}
}
return (
{grid.map((v, i) => (
))}
);
}
// Brand wordmark — auto-picks the right logo for the surface theme.
// → use on light backgrounds (sidebar, dark hero)
// → use on dark backgrounds
function BrandLogo({ theme = "dark", height = 22, withPay = false }){
const src = theme === "light"
? "assets/blackx-logo-light.png"
: "assets/blackx-logo-dark.png";
return (
{withPay && (
pay
)}
);
}
// Keep BrandMark as a compact square mark (favicon-ish), unused in most places now
function BrandMark({ size = 30 }){
return (
B
);
}
// ============================================================
// ImageDropper — drag/drop or click to upload a product/bump image
// ============================================================
function ImageDropper({ value, onChange, label = "Imagem", hint = "PNG ou JPG · proporção 4:3 ideal" }){
const [drag, setDrag] = React.useState(false);
const inputRef = React.useRef(null);
const handleFile = (file) => {
if (!file || !file.type.startsWith("image/")) return;
const reader = new FileReader();
reader.onload = () => onChange(reader.result);
reader.readAsDataURL(file);
};
return (