// Reusable UI Components
const Modal = ({ isOpen, onClose, title, children, maxWidth = "max-w-6xl", zIndex = "z-50" }) => {
if (!isOpen) return null;
return (
e.stopPropagation()}>
{title}
{children}
);
};
const Card = ({ children, className = "" }) => (
{children}
);
const Badge = ({ children, color = "blue" }) => {
const c = {
blue: "bg-blue-50 text-blue-700 border-blue-100",
slate: "bg-slate-100 text-slate-600 border-slate-200"
};
return {children};
};
const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
{label}
{payload.map((e, i) => (
))}
);
}
return null;
};
const StatCard = ({ title, value, percentage, iconName, color, onClick, isClickable = false, size = "normal", isActive = false }) => (
{percentage != null && (
{percentage}%
)}
);