/* global React */ const { useState } = React; // ============================================================ // Vuexy Dashboard UI Kit — cosmetic React components // ============================================================ // Inline SVG icon library — Tabler-style 2px stroke, 24×24 viewBox const ICON_PATHS = { "smart-home": "M5 12l-2 0l9 -9l9 9l-2 0M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6", "chart-bar": "M3 12m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1zM9 8m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v11a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1zM15 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v15a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1zM4 20h14", "shopping-cart": "M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M17 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M17 17h-11v-14h-2M6 5l14 1l-1 7h-13", "mail": "M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2zM3 7l9 6l9 -6", "message-circle": "M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1M12 12l0 .01M8 12l0 .01M16 12l0 .01", "calendar": "M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2zM16 3v4M8 3v4M4 11h16M11 15h1M12 15v3", "file-invoice": "M14 3v4a1 1 0 0 0 1 1h4M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2M9 7l1 0M9 13l6 0M13 17l2 0", "users": "M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2M16 3.13a4 4 0 0 1 0 7.75M21 21v-2a4 4 0 0 0 -3 -3.85", "shield-lock": "M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3M12 11m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M12 12v2.5", "settings": "M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", "help-circle": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0M12 17l0 .01M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4", "search": "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0M21 21l-6 -6", "language": "M4 5h7M9 3v2c0 4.418 -2.239 8 -5 8M5 9c-.003 2.144 2.952 3.908 6.7 4M12 20l4 -9l4 9M19.1 18h-6.2", "moon-stars": "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454zM17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2M19 11h2M20 10v2", "sun": "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M3 12h1M12 3v1M20 12h1M12 20v1M5.6 5.6l.7 .7M18.4 5.6l-.7 .7M17.7 17.7l.7 .7M6.3 17.7l-.7 .7", "apps": "M4 4h6v6h-6zM14 4h6v6h-6zM4 14h6v6h-6zM14 14h6v6h-6z", "bell": "M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6M9 17v1a3 3 0 0 0 6 0v-1", "plus": "M12 5l0 14M5 12l14 0", "dots-vertical": "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "download": "M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2M7 11l5 5l5 -5M12 4l0 12", "currency-dollar": "M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2M12 3v3m0 12v3", "trending-up": "M3 17l6 -6l4 4l8 -8M14 7l7 0l0 7", "device-mobile": "M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2zM11 4h2M12 17v.01", "hanger": "M12 7a2 2 0 1 1 3 -1.7c0 .6 -.4 1.2 -1 1.5l-9.2 5.4a2 2 0 0 0 -1 1.7c0 1.1 .9 2.1 2 2.1h14a2 2 0 0 0 2 -2.1a2 2 0 0 0 -1 -1.7l-9.2 -5.4", "home": "M5 12l-2 0l9 -9l9 9l-2 0M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6", "armchair": "M5 11a2 2 0 0 1 2 2v2h10v-2a2 2 0 1 1 4 0v4a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2M5 11v-3a4 4 0 0 1 4 -4h6a4 4 0 0 1 4 4v3M6 19v2M18 19v2", "arrow-left": "M5 12l14 0M5 12l6 6M5 12l6 -6", "layout-dashboard": "M4 4h6v8h-6zM14 4h6v5h-6zM14 13h6v7h-6zM4 16h6v4h-6z", "corner-down-left": "M18 6v6a3 3 0 0 1 -3 3h-10l4 -4M9 19l-4 -4", }; const TI = ({ n, size = 18, color, strokeWidth = 2 }) => { const d = ICON_PATHS[n]; if (!d) return ; return ( ); }; // -------- Button -------- function Button({ children, variant = "primary", size = "md", icon, style, ...rest }) { const base = { display: "inline-flex", alignItems: "center", gap: 6, border: "1px solid transparent", borderRadius: 6, cursor: "pointer", fontFamily: "var(--font-sans)", fontWeight: 500, letterSpacing: "0.25px", transition: "all .15s ease", whiteSpace: "nowrap", }; const sizes = { sm: { padding: "4px 14px", fontSize: 13, lineHeight: "18px" }, md: { padding: "8px 22px", fontSize: 15, lineHeight: "22px" }, lg: { padding: "11px 24px", fontSize: 17, lineHeight: "26px" }, }; const variants = { primary: { background: "#7367F0", color: "#fff", boxShadow: "0 2px 4px 0 rgba(115,103,240,.3)" }, tonal: { background: "rgba(115,103,240,.16)", color: "#7367F0" }, outline: { background: "transparent", color: "#7367F0", borderColor: "rgba(115,103,240,.5)" }, text: { background: "transparent", color: "#7367F0" }, success: { background: "#28C76F", color: "#fff", boxShadow: "0 2px 4px 0 rgba(40,199,111,.3)" }, error: { background: "#FF4C51", color: "#fff", boxShadow: "0 2px 4px 0 rgba(255,76,81,.3)" }, }; const hoverBg = { primary: "#685DE0", tonal: "rgba(115,103,240,.24)", outline: "rgba(115,103,240,.08)", text: "rgba(115,103,240,.08)", success: "#24B163", error: "#E54248", }; const restEnter = rest.onMouseEnter, restLeave = rest.onMouseLeave; return ( ); } function IconButton({ icon, size = 38, onClick, style, badge }) { return ( ); } // -------- Avatar -------- function Avatar({ initials = "JD", size = 38, color = "#7367F0", tonal = false, status, square, style }) { const bg = tonal ? `${color}29` : color; const fg = tonal ? color : "#fff"; return ( {initials} {status && } ); } // -------- Chip -------- function Chip({ children, color = "#7367F0", variant = "tonal" }) { const styles = variant === "tonal" ? { background: `${color}29`, color } : { background: color, color: "#fff" }; return ( {children} ); } // -------- Stat Card -------- function StatCard({ icon, iconColor = "#7367F0", label, value, delta, deltaPositive = true }) { return (
{label}
{value}
{deltaPositive ? "↑" : "↓"} {delta}
); } // -------- Section Card -------- function SectionCard({ title, subtitle, action, children, style }) { return (
{title}
{subtitle &&
{subtitle}
}
{action}
{children}
); } // -------- Sidebar -------- function Sidebar({ active, onNavigate }) { const items = [ { g: "DASHBOARDS", items: [ { id: "crm", icon: "smart-home", label: "CRM" }, { id: "analytics", icon: "chart-bar", label: "Analytics", badge: "Hot" }, { id: "ecommerce", icon: "shopping-cart", label: "eCommerce" }, ]}, { g: "APPS & PAGES", items: [ { id: "email", icon: "mail", label: "Email" }, { id: "chat", icon: "message-circle", label: "Chat" }, { id: "calendar", icon: "calendar", label: "Calendar" }, { id: "invoice", icon: "file-invoice", label: "Invoice" }, { id: "users", icon: "users", label: "Users" }, { id: "roles", icon: "shield-lock", label: "Roles & Permissions" }, ]}, { g: "OTHERS", items: [ { id: "settings", icon: "settings", label: "Account Settings" }, { id: "help", icon: "help-circle", label: "FAQ" }, ]}, ]; return ( ); } // -------- Navbar -------- function Navbar({ onOpenSearch, onToggleTheme, theme }) { return (
); } // -------- Data Table -------- function DataTable({ columns, rows }) { return (
{columns.map(c => ( ))} {rows.map((r, i) => ( {columns.map(c => ( ))} ))}
{c.label}
{c.render ? c.render(r) : r[c.key]}
); } // -------- Search Palette -------- function SearchPalette({ onClose }) { return (
e.stopPropagation()} style={{ width: 560, background: "#fff", borderRadius: 10, boxShadow: "0 10px 24px -4px rgba(58,53,65,.3)", overflow: "hidden", }}>
ESC
RECENT
{[ { i: "user", l: "John Doe", s: "Customer · Premium" }, { i: "file-invoice", l: "Invoice #INV-2845", s: "$1,284.00 · Paid" }, { i: "settings", l: "Account settings", s: "Page" }, ].map((r, idx) => (
e.currentTarget.style.background = "rgba(47,43,61,0.06)"} onMouseLeave={e => e.currentTarget.style.background = "transparent"} >
{r.l}
{r.s}
))}
); } // Sparkline placeholder function Sparkline({ color = "#7367F0", data = [20, 30, 25, 40, 28, 55, 42, 60], height = 40 }) { const w = 120; const max = Math.max(...data), min = Math.min(...data); const pts = data.map((d, i) => { const x = (i / (data.length - 1)) * w; const y = height - ((d - min) / (max - min || 1)) * height; return `${x},${y}`; }).join(" "); return ( ); } Object.assign(window, { Button, IconButton, Avatar, Chip, StatCard, SectionCard, Sidebar, Navbar, DataTable, SearchPalette, Sparkline, TI, });