{lang==="es"?"CUENTA":"ACCOUNT"}
{dash.accounts.map(a => (
))}
{dash.regex && (
ⓘ {lang==="es"
? `+ campañas con "${dash.regex.split('|').join('/')}" de otras cuentas`
: `+ campaigns matching "${dash.regex.split('|').join('/')}" from other accounts`}
)}
);
}
// ---------- Tweaks panel ----------
function Tweaks({ tweaks, setTweak }) {
const [open, setOpen] = useState(false);
useEffect(() => {
const handler = (e) => {
if (e.data?.type === "__activate_edit_mode") setOpen(true);
if (e.data?.type === "__deactivate_edit_mode") setOpen(false);
};
window.addEventListener("message", handler);
window.parent.postMessage({ type: "__edit_mode_available" }, "*");
return () => window.removeEventListener("message", handler);
}, []);
const close = () => {
setOpen(false);
window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*");
};
if (!open) return null;
const T = window.TweaksPanel ? window.TweaksPanel : null;
if (!T) return null;
return (
setTweak("lang", v)}
/>
setTweak("density", v)}
/>
setTweak("accent", v)}
/>
setTweak("showBrandRail", v)}
/>
);
}
// ---------- Visual month-grid range calendar (vanilla, no deps) ----------
const _fmtLocal = (d) => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`;
function MiniCalendar({ from, to, onPick, lang }) {
const seed = from ? new Date(from + "T00:00:00") : new Date();
const [view, setView] = useState(new Date(seed.getFullYear(), seed.getMonth(), 1));
const y = view.getFullYear(), m = view.getMonth();
const monthName = view.toLocaleDateString(lang === "es" ? "es-ES" : "en-US", { month: "long", year: "numeric" });
const firstW = (new Date(y, m, 1).getDay() + 6) % 7; // lunes=0
const days = new Date(y, m + 1, 0).getDate();
const cells = [];
for (let i = 0; i < firstW; i++) cells.push(null);
for (let d = 1; d <= days; d++) cells.push(new Date(y, m, d));
const today = _fmtLocal(new Date());
const dow = lang === "es" ? ["L","M","M","J","V","S","D"] : ["M","T","W","T","F","S","S"];
const NAVY = "var(--wm-blue,#1D429B)";
const btn = { background: "none", border: "none", cursor: "pointer", color: "var(--wm-fg-muted)", padding: 4, borderRadius: 6, display: "inline-flex" };
return (
{monthName}
{dow.map((d,i)=>
{d}
)}
{cells.map((d, i) => {
if (!d) return ;
const iso = _fmtLocal(d);
const isFrom = from && iso === from, isTo = to && iso === to;
const inRange = from && to && iso >= from && iso <= to;
const isToday = iso === today;
const edge = isFrom || isTo;
return (
);
})}
);
}
// ---------- Date range picker (presets + custom calendar) ----------
function DateRangePicker({ value, onChange, lang }) {
const [showCustom, setShowCustom] = useState(false);
const [customFrom, setCustomFrom] = useState("");
const [customTo, setCustomTo] = useState("");
const presets = lang === "es"
? [
{ v: "today", l: "Hoy", t: "Solo el día de hoy" },
{ v: "7d", l: "7 días", t: "Últimos 7 días incluyendo hoy" },
{ v: "30d", l: "30 días", t: "Últimos 30 días incluyendo hoy" },
{ v: "90d", l: "90 días", t: "Últimos 90 días incluyendo hoy" },
{ v: "mtd", l: "MTD", t: "Month-to-Date: del día 1 de este mes hasta hoy" },
{ v: "qtd", l: "QTD", t: "Quarter-to-Date: del día 1 de este trimestre hasta hoy" },
]
: [
{ v: "today", l: "Today", t: "Today only" },
{ v: "7d", l: "7d", t: "Last 7 days including today" },
{ v: "30d", l: "30d", t: "Last 30 days including today" },
{ v: "90d", l: "90d", t: "Last 90 days including today" },
{ v: "mtd", l: "MTD", t: "Month-to-Date: from the 1st of this month to today" },
{ v: "qtd", l: "QTD", t: "Quarter-to-Date: from the 1st of this quarter to today" },
];
const isCustom = typeof value === "object" && value.from && value.to;
// Helper to default custom values from current selection
useEffect(() => {
if (showCustom && (!customFrom || !customTo)) {
const today = new Date().toISOString().slice(0, 10);
const monthAgo = new Date(Date.now() - 30 * 86400 * 1000).toISOString().slice(0, 10);
setCustomFrom(customFrom || monthAgo);
setCustomTo(customTo || today);
}
}, [showCustom]);
return (
