// lib.jsx — Arco Rooms shared atoms, EstateFlow-styled
// Lucide-style icons, EF status badges, EF stat tile.
// ───────────────────────── ICONS ─────────────────────────
// All Lucide-style: 1.8 stroke, round caps & joins, 24px viewBox.
// Same approach as EstateFlow design system's icons.jsx.
const ICON_PATHS = {
// brand / nav
house: '',
building: '',
users: '',
dashboard: '',
euro: '',
wrench: '',
chat: '',
sun: '',
moon: '',
calendar: '',
bed: '',
door: '',
receipt: '',
file: '',
// search / nav glyphs
search: '',
bell: '',
settings: '',
// arrows / chevrons
chevR: '',
chevL: '',
chevD: '',
chevU: '',
arrowUp: '',
arrowDown: '',
arrowR: '',
arrowUR: '',
// misc actions
check: '',
checkCircle: '',
x: '',
plus: '',
filter: '',
sort: '',
grid: '',
list: '',
more: '',
clock: '',
send: '',
paperclip: '',
download: '',
eye: '',
// status
trendUp: '',
trendDown: '',
spark: '',
panelClose:'',
panelOpen: '',
};
function Icon({ name, size = 16, color, strokeWidth = 1.8, style = {}, className = "", ...rest }) {
const p = ICON_PATHS[name] || "";
return (
);
}
// ───────────────────────── BRAND MARK ─────────────────────────
// EstateFlow uses an outline house icon for the brand. We adapt — same
// shape and stroke language, paired with the "Arco Rooms" wordmark.
function BrandMark({ size = 26 }) {
return (
);
}
// ───────────────────────── FLAGS ─────────────────────────
const FLAGS = { FR: "🇫🇷", DE: "🇩🇪", IT: "🇮🇹", PL: "🇵🇱", DK: "🇩🇰", NL: "🇳🇱", ES: "🇪🇸", GB: "🇬🇧", PT: "🇵🇹", US: "🇺🇸", BR: "🇧🇷", AT: "🇦🇹", JP: "🇯🇵", NO: "🇳🇴" };
const Flag = ({ code }) => {FLAGS[code] || "🌍"};
// ───────────────────────── FORMATTING ─────────────────────────
const fmtEUR = (n, { sign = false } = {}) => {
if (n == null) return "—";
const abs = Math.abs(Math.round(n));
const grouped = abs.toLocaleString("en-GB").replace(/,/g, "\u202f");
const prefix = n < 0 ? "−" : (sign ? "+" : "");
return `${prefix}${grouped} €`;
};
const fmtEURc = (n) => {
if (n == null) return "—";
const grouped = n.toLocaleString("en-GB", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
return `${grouped} €`;
};
const fmtDate = (iso, opts = {}) => {
if (!iso) return "—";
const d = new Date(iso);
const { short = false, withYear = false, withTime = false } = opts;
const m = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][d.getMonth()];
const ml = ["January","February","March","April","May","June","July","August","September","October","November","December"][d.getMonth()];
const day = d.getDate();
const yr = d.getFullYear();
if (short) return `${day} ${m}` + (withYear ? ` ${yr}` : "");
if (withTime) {
const h = String(d.getHours()).padStart(2, "0");
const mm = String(d.getMinutes()).padStart(2, "0");
return `${day} ${m}, ${h}:${mm}`;
}
return `${day} ${ml}` + (withYear ? ` ${yr}` : "");
};
const relTime = (iso) => {
const now = ArcoData.today.getTime();
const t = new Date(iso).getTime();
const diff = Math.round((now - t) / 60000);
if (diff < 1) return "just now";
if (diff < 60) return `${diff}m ago`;
if (diff < 60 * 24) return `${Math.floor(diff / 60)}h ago`;
const days = Math.floor(diff / (60 * 24));
if (days < 7) return `${days}d ago`;
return fmtDate(iso, { short: true });
};
const initials = (name) => name.split(/\s+/).slice(0, 2).map((s) => s[0]).join("").toUpperCase();
// "Camille Bertrand" → "Camille B." (first name + last surname's initial).
// Caller can decide how to truncate visually; this returns the canonical form.
const shortName = (name) => {
if (!name) return "—";
const parts = name.split(/\s+/);
if (parts.length === 1) return parts[0];
const last = parts[parts.length - 1];
return `${parts[0]} ${last[0]}.`;
};
// ───────────────────────── COMPONENTS ─────────────────────────
const Card = ({ children, className = "", lift = false, tinted = false, lg = false, ...rest }) => (
{children}
);
// Delta chip — EstateFlow's signature "↑5%" pill.
function Delta({ dir = "up", value }) {
const isUp = dir === "up";
const isFlat = dir === "flat";
return (
{!isFlat && (isUp ? "↑" : "↓")} {value}
);
}
// Stat tile — label, big value, optional delta chip and sub line.
function Stat({ label, value, icon, delta, deltaDir = "up", sub, prefix, onClick, href }) {
const interactive = !!(onClick || href);
const Tag = href ? "a" : interactive ? "button" : "div";
const extra = href
? { href }
: interactive
? { onClick, type: "button" }
: {};
return (
{icon && }
{label}
{prefix}{value}
{delta && }
{sub && {sub}
}
);
}
// Status badge — ALL CAPS, soft tint. Style per status via CSS class.
// Labels use the i18n dictionary (st.*) so they read in EN or ES.
const StatusBadge = ({ status, label }) => {
if (!status) return null;
const tt = (typeof window.t === "function") ? window.t : (k) => k;
const keyMap = {
paid: "st.paid", pending: "st.pending", overdue: "st.overdue",
open: "st.open", "in-progress": "st.inProgress", resolved: "st.resolved",
confirmed: "st.confirmed", tentative: "st.tentative", blocked: "st.blocked",
resident: "st.resident", active: "st.active", past: "st.past",
occupied: "st.occupied", vacant: "st.vacant", maintenance: "st.maintenance",
high: "st.high", medium: "st.medium", low: "st.low", med: "st.medium",
};
const k = keyMap[status];
const resolved = label || (k ? tt(k) : status.toUpperCase());
return {resolved};
};
// Pill — non-status flag with hairline border. Optional tone for emphasis.
const Pill = ({ children, className = "", tone, ...rest }) => (
{children}
);
// Avatar — neutral monochrome circle with initials. When `apt` is set,
// the avatar takes the apartment's identity color (clay / moss / denim / sand).
const Avatar = ({ name, size = "", accent = false, primary = false, apt = null }) => {
const cls = ["avatar"];
if (size) cls.push(size);
if (accent) cls.push("accent");
if (primary) cls.push("primary");
return {initials(name || "?")};
};
// Tabs — segmented (default) or underline.
const Tabs = ({ tabs, value, onChange, underline = false }) => (
{tabs.map((t) => (
))}
);
// Donut (occupancy)
const Donut = ({ value, size = 120, stroke = 14, label, sub }) => {
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const dash = c * (value / 100);
return (
);
};
// Link — quiet inline link.
const Link = ({ to, onClick, children, className = "", ...rest }) => (
{ e.preventDefault(); onClick && onClick(); }}
className={`arco-link ${className}`}
style={{ color: "var(--ef-ink-2)", borderBottom: "1px dotted var(--ef-muted)", paddingBottom: 1, cursor: "pointer" }}
{...rest}>{children}
);
const Empty = ({ icon, title, body, action }) => (
{icon &&
}
{title}
{body &&
{body}
}
{action &&
{action}
}
{idx &&
{idx}}
{children}
{hint &&
{hint}}
{right &&
{right}
}
{incLabel} {fmtEUR(totals.income)}
{expLabel} {fmtEUR(totals.expenses)}
{netLabel} = 0 ? "var(--ef-accent-deep)" : "var(--ef-danger)" }}>{fmtEUR(totals.net, { sign: totals.net > 0 })}
·
{avgLabel} {fmtEUR(avgNet)}/mo
·
{margin}% margin
{hover !== null && (() => {
const d = data[hover];
const cx = (xCenter(hover) / W) * 100;
const net = d.income - d.expenses;
return (
{d.month}
{incLabel}
{fmtEUR(d.income)}
{expLabel}
−{fmtEUR(d.expenses)}
{netLabel}
= 0 ? "var(--ef-accent-deep)" : "var(--ef-danger)" }}>
{fmtEUR(net, { sign: net > 0 })}
);
})()}
);
};
// Apartment hero — a placeholder with per-apt identity color.
// Each flat carries a muted brand hue (--apt-{id}-bg/ink) defined in
// styles.css so they stay tonally aligned with the EstateFlow neutrals.
const APT_PALETTE = {
"ap-pez": { bg: "var(--apt-pez-bg)", ink: "var(--apt-pez-ink)", soft: "var(--apt-pez-soft)", name: "Clay" },
"ap-hort": { bg: "var(--apt-hort-bg)", ink: "var(--apt-hort-ink)", soft: "var(--apt-hort-soft)", name: "Moss" },
"ap-atoc": { bg: "var(--apt-atoc-bg)", ink: "var(--apt-atoc-ink)", soft: "var(--apt-atoc-soft)", name: "Denim" },
"ap-pmay": { bg: "var(--apt-pmay-bg)", ink: "var(--apt-pmay-ink)", soft: "var(--apt-pmay-soft)", name: "Sand" },
};
const aptPalette = (id) => APT_PALETTE[id] || { bg: "#EDEAE0", ink: "#3A3F4A", soft: "#F6F6F3", name: "—" };
// Small inline dot — sits next to apartment names in lists/tables.
const AptDot = ({ aptId, size = 8 }) => {
const p = aptPalette(aptId);
return (
);
};
const AptArchHero = ({ aptId }) => {
const p = aptPalette(aptId);
return (
);
};
// Confirm-style toast
const Toast = (props) => {
// Backwards-compatible: callers can pass `message` directly OR pass the
// whole `{ message, undo, ttl }` shape via `toast` (from app.jsx state).
const { message, undo, ttl = 2400, onDone } = props;
const ttt = (typeof window.t === "function") ? window.t : (k) => k;
React.useEffect(() => {
const t = setTimeout(onDone, undo ? Math.max(ttl, 5000) : ttl);
return () => clearTimeout(t);
}, [onDone, ttl, undo]);
return (
{message}
{undo && (
)}
);
};
// Modal shell
const Modal = ({ title, onClose, children, footer, maxWidth = 580, ariaLabel }) => {
const bodyRef = React.useRef(null);
React.useEffect(() => {
const onKey = (e) => e.key === "Escape" && onClose && onClose();
window.addEventListener("keydown", onKey);
// Focus first input on open for accessibility
const timer = setTimeout(() => {
const el = bodyRef.current && bodyRef.current.querySelector("input, select, textarea, button");
if (el) el.focus();
}, 50);
return () => { window.removeEventListener("keydown", onKey); clearTimeout(timer); };
}, [onClose]);
return (
e.target === e.currentTarget && onClose && onClose()}
role="dialog" aria-modal="true" aria-label={ariaLabel || title || "Diálogo"}>
{title && (
{title}
)}
{children}
{footer &&
{footer}
}
{body}
}
);
};
window.ConfirmDialog = ConfirmDialog;
// Sparkline
const Sparkline = ({ values, width = 90, height = 28, stroke = "var(--ef-accent)" }) => {
const max = Math.max(...values), min = Math.min(...values);
const range = max - min || 1;
const step = width / (values.length - 1);
const pts = values.map((v, i) => `${i * step},${height - ((v - min) / range) * (height - 4) - 2}`).join(" ");
return (
);
};
// Filter pills row
const FilterPills = ({ value, onChange, options }) => (
{options.map((o) => (
))}
);
// Detail row for tenant profile
const DetailRow = ({ icon, label, value }) => (
{icon && }
{label}
{value}
);
// Compact KPI tile — used inside detail headers
const KPI = ({ label, value, color }) => (
);
// Expose globally
// ───────────────────────── DROPDOWN / MENU ─────────────────────────
// Ported from preview-d. Portal-rendered so it escapes overflow:hidden,
// keyboard escape, click-outside close, smart drop-up positioning.
// Uses React Context to provide close() to nested MenuItems without
// polluting unrelated children (divs, profile rows) via cloneElement.
const DropdownContext = React.createContext({ close: () => {} });
function Dropdown({ trigger, children, align = "right", width, menuClassName = "" }) {
const [open, setOpen] = React.useState(false);
const [pos, setPos] = React.useState(null);
const triggerRef = React.useRef();
const menuRef = React.useRef();
const measure = React.useCallback(() => {
const tr = triggerRef.current?.firstChild;
if (!tr) return;
const r = tr.getBoundingClientRect();
const spaceBelow = window.innerHeight - r.bottom;
const spaceAbove = r.top;
const dropUp = spaceAbove > spaceBelow && spaceBelow < 240;
setPos({
top: dropUp ? undefined : r.bottom + 6,
bottom: dropUp ? window.innerHeight - r.top + 6 : undefined,
left: r.left,
right: window.innerWidth - r.right,
triggerW: r.width,
maxHeight: Math.max(180, (dropUp ? spaceAbove : spaceBelow) - 16),
});
}, []);
React.useEffect(() => {
if (!open) return;
measure();
const onClick = (e) => {
if (triggerRef.current?.contains(e.target) || menuRef.current?.contains(e.target)) return;
setOpen(false);
};
const onKey = (e) => e.key === "Escape" && setOpen(false);
const onScroll = () => measure();
document.addEventListener("mousedown", onClick);
document.addEventListener("keydown", onKey);
window.addEventListener("resize", onScroll);
window.addEventListener("scroll", onScroll, true);
return () => {
document.removeEventListener("mousedown", onClick);
document.removeEventListener("keydown", onKey);
window.removeEventListener("resize", onScroll);
window.removeEventListener("scroll", onScroll, true);
};
}, [open, measure]);
const toggle = (e) => { e.stopPropagation(); setOpen((o) => !o); trigger.props.onClick?.(e); };
const menuStyle = pos ? {
position: "fixed",
top: pos.top != null ? pos.top : "auto",
bottom: pos.bottom != null ? pos.bottom : "auto",
...(align === "right" ? { right: pos.right } : align === "center" ? { left: pos.left + pos.triggerW / 2, transform: "translateX(-50%)" } : { left: pos.left }),
...(width ? { width } : {}),
maxHeight: pos.maxHeight,
} : { display: "none" };
return (
<>
{React.cloneElement(trigger, { onClick: toggle, "aria-expanded": open })}
{open && pos && ReactDOM.createPortal(
setOpen(false) }}>
{children}
,
document.body
)}
);
}
function MenuItem({ icon, label, hint, onClick, danger, disabled }) {
const { close } = React.useContext(DropdownContext);
return (
);
}
function MenuDivider() { return ; }
function MenuHeader({ children }) { return {children}
; }
function MenuFooter({ children }) { return {children}
; }
Object.assign(window, {
Icon, BrandMark, Flag, FLAGS,
fmtEUR, fmtDate, relTime, initials,
Card, Stat, Delta, StatusBadge, Pill, Avatar, Tabs, Donut,
Link, Empty, SectionTitle, BarChart, AptArchHero, AptDot, aptPalette, APT_PALETTE, Toast, Modal,
Sparkline, FilterPills, DetailRow, KPI,
Dropdown, MenuItem, MenuDivider, MenuHeader, MenuFooter,
shortName,
});