/* global React */ // ============================================================ // Trekko Admin — icon library (line icons) // All 16x16 by default, currentColor stroke 1.5 // ============================================================ const Ic = ({ d, size = 16, fill, stroke = "currentColor", sw = 1.5, ...rest }) => {Array.isArray(d) ? d.map((dd, i) => ) : } ; const Icon = { Home: (p) => , Dashboard: (p) => , Bookings: (p) => , Users: (p) => , Building: (p) => , Car: (p) => , Vendor: (p) => , Payment: (p) => , Wallet: (p) => , Settings: (p) => , Globe: (p) => , Chart: (p) => , Pie: (p) => , Trend: (p) => , Bell: (p) => , Search: (p) => , Plus: (p) => , Filter: (p) => , Download: (p) => , Upload: (p) => , Edit: (p) => , Trash: (p) => , Eye: (p) => , EyeOff: (p) => , More: (p) => , ChevronDown: (p) => , ChevronRight: (p) => , ChevronLeft: (p) => , ChevronUp: (p) => , ArrowUp: (p) => , ArrowDown: (p) => , Check: (p) => , X: (p) => , Info: (p) => , Warning: (p) => , Cal: (p) => , Mail: (p) => , Phone: (p) => , Pin: (p) => , Logout: (p) => , Star: (p) => , Clock: (p) => , Refresh: (p) => , Doc: (p) => , Link: (p) => , Bookmark: (p) => , Tag: (p) => , Lock: (p) => , Shield: (p) => , Bed: (p) => , Plane: (p) => , Ship: (p) => , Sun: (p) => , Moon: (p) => , Help: (p) => , Send: (p) => , Copy: (p) => }; // ============================================================ // Tiny presentational helpers // ============================================================ function Badge({ tone = "neutral", plain, children }) { return {children}; } function Tag({ kind = "neutral", children }) { return {children}; } const AVATAR_BG = [ "linear-gradient(135deg,#635bff,#8d6eff)", "linear-gradient(135deg,#00d4ff,#0e7c66)", "linear-gradient(135deg,#ff9f43,#d4366a)", "linear-gradient(135deg,#4b45c4,#a78bfa)", "linear-gradient(135deg,#0e7c66,#00d4ff)", "linear-gradient(135deg,#d4366a,#ff9f43)"]; function Avatar({ name = "", size = "md" }) { const initials = name. split(" "). filter(Boolean). slice(0, 2). map((s) => s[0]). join(""). toUpperCase() || "?"; const idx = (name.charCodeAt(0) + name.length) % AVATAR_BG.length; const cls = size === "sm" ? "avatar avatar--sm" : size === "lg" ? "avatar avatar--lg" : size === "xl" ? "avatar avatar--xl" : "avatar"; return {initials}; } function Button({ kind = "secondary", size, icon, iconOnly, block, loading, children, ...rest }) { // Some callers pass loading={false} as a UX hint. React complains if a // boolean-coerced non-standard attribute leaks to the DOM, so consume // it here and only attach a data-loading marker when truthy. const cls = [ "btn", `btn--${kind}`, size ? `btn--${size}` : "", iconOnly ? "btn--icon" : "", block ? "btn--block" : "", loading ? "btn--loading" : "", ].filter(Boolean).join(" "); const dataLoading = loading ? "true" : undefined; return ( ); } function Field({ label, hint, error, children }) { return ( ); } function Toggle({ on, onChange }) { return ( )} ); } function Segmented({ options, value, onChange }) { return (
{options.map((o) => )}
); } function PeriodPicker({ value, onChange }) { const { useState, useRef, useEffect } = React; const [open, setOpen] = useState(false); const [from, setFrom] = useState(""); const [to, setTo] = useState(""); const ref = useRef(null); useEffect(() => { const h = (e) => {if (ref.current && !ref.current.contains(e.target)) setOpen(false);}; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []); const opts = [ { value: "today", label: "Today" }, { value: "week", label: "Week" }, { value: "month", label: "Month" }, { value: "qtd", label: "QTD" }, { value: "ytd", label: "YTD" }, { value: "custom", label: "Custom" }]; return (
{opts.map((o) => )}
{open &&
Custom date range
setFrom(e.target.value)} /> setTo(e.target.value)} />
}
); } function Card({ title, sub, actions, foot, flush, children, style, className }) { return (
{(title || actions) &&
{title &&
{title}
{sub &&
{sub}
}
} {actions &&
{actions}
}
}
{children}
{foot &&
{foot}
}
); } function Metric({ label, value, delta, deltaDir, hint, accent, mom, momDir, yoy, yoyDir }) { return (
{label}
{value}
{mom != null || yoy != null ?
{mom != null && MoM {momDir === "down" ? : }{mom} } {yoy != null && YoY {yoyDir === "down" ? : }{yoy} } {hint && {hint}}
:
{delta != null && {deltaDir === "down" ? : } {delta} } {hint && {hint}}
}
); } // ============================================================ // Modal (controlled) // ============================================================ function Modal({ open, title, onClose, footer, size, children }) { if (!open) return null; return (
e.stopPropagation()}>

{title}

{children}
{footer &&
{footer}
}
); } // ============================================================ // Pagination // ============================================================ function Pager({ page = 1, pageSize = 10, total = 0, onPage }) { const totalPages = Math.max(1, Math.ceil(total / pageSize)); const start = total === 0 ? 0 : (page - 1) * pageSize + 1; const end = Math.min(page * pageSize, total); const nums = []; const push = (n) => nums.push(n); push(1); if (page - 2 > 2) push("…"); for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) push(i); if (page + 2 < totalPages - 1) push("…"); if (totalPages > 1) push(totalPages); return (
Showing {start}–{end} of {total.toLocaleString()}
{nums.map((n, i) => n === "…" ? … : )}
); } // ============================================================ // Toast system (Stripe-style ephemeral confirmations) // ============================================================ function Toaster() { var { useState, useEffect } = React; var [items, setItems] = useState([]); useEffect(() => { const handler = (e) => { const t = { id: Date.now() + Math.random(), ...e.detail }; setItems((s) => [...s, t]); setTimeout(() => setItems((s) => s.filter((x) => x.id !== t.id)), t.duration || 3600); }; window.addEventListener("toast", handler); return () => window.removeEventListener("toast", handler); }, []); return (
{items.map((t) =>
{t.tone === "danger" ? : t.tone === "warning" ? : }
{t.title &&
{t.title}
} {t.body &&
{t.body}
}
)}
); } function toast(detail) { window.dispatchEvent(new CustomEvent("toast", { detail })); } // ============================================================ // expose to window so other Babel scripts can use them // ============================================================ Object.assign(window, { Icon, Badge, Tag, Avatar, Button, Field, Toggle, Tabs, Segmented, PeriodPicker, Card, Metric, Modal, Pager, Toaster, toast });