// ═══════════════════════════════════════════════════════════════
// UI primitives · Escalab Gestão de Pessoas Design System
// ═══════════════════════════════════════════════════════════════
const Icon = ({ name, size = 18 }) => {
const paths = {
home: <>,
users: <>,
user: <>,
chart: <>,
star: <>,
clipboard: <>,
message: <>,
settings: <>,
logout: <>,
close: <>,
plus: <>,
check: <>,
chev_right: <>,
chev_down: <>,
chev_left: <>,
search: <>,
upload: <>,
download: <>,
eye: <>,
eye_off: <>,
warn: <>,
info: <>,
file: <>,
trophy: <>,
calendar: <>,
trend_up: <>,
lock: <>,
menu: <>,
bell: <>,
dot: <>,
chev_up: <>,
unlock: <>,
org: <>,
filter: <>,
more_v: <>,
send: <>,
drag: <>,
grid: <>,
clock: <>,
};
return (
);
};
const Avatar = ({ nome, cor, iniciais, size = 36 }) => (
{iniciais || (nome || '?').slice(0, 2).toUpperCase()}
);
const PhotoAvatar = ({ colaborador, size = 36, canEdit = false }) => {
const [foto, setFoto] = React.useState(() => getFoto(colaborador.id));
function handleUpload(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = ev => { salvarFoto(colaborador.id, ev.target.result); setFoto(ev.target.result); };
reader.readAsDataURL(file);
}
return (
{foto
?
:
}
{canEdit && (
)}
{children}
);
const KpiCard = ({ label, value, sublabel, dark, icon, trend }) => (
{value}
{sublabel &&
{sublabel}
}
{trend != null && (
= 0 ? 'var(--escalab-brand-accent)' : '#FFB4B0' }}>
{trend >= 0 ? '▲' : '▼'} {Math.abs(trend).toFixed(1)}% vs. ciclo anterior
)}
);
const Field = ({ label, hint, children, span }) => (
{children}
{hint &&
{hint}
}
);
const Input = ({ value, onChange, type = 'text', placeholder, prefix, suffix, style }) => {
const [show, setShow] = useState(false);
const t = type === 'password' && show ? 'text' : type;
return (
{prefix && {prefix}}
onChange?.(e.target.value)} type={t} placeholder={placeholder}
style={{ border: 0, outline: 0, flex: 1, padding: '10px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', background: 'transparent', color: 'var(--escalab-ink)' }} />
{type === 'password' && (
)}
{suffix && {suffix}}
);
};
const SelectInput = ({ value, onChange, options, placeholder }) => (
);
const Progress = ({ value, max = 5, tone = 'brand', label, showValue }) => {
const pct = Math.min(100, (value / max) * 100);
const color = { brand: 'var(--escalab-brand)', accent: 'var(--escalab-brand-accent)', warn: '#E89B3B', danger: '#E05050' }[tone] || 'var(--escalab-brand)';
return (
{(label || showValue) && (
{label && {label}}
{showValue && {value?.toFixed ? value.toFixed(1) : value}}
)}
e.stopPropagation()} style={{
background: '#fff', borderRadius: isMob ? '20px 20px 0 0' : 14,
width: '100%', maxWidth: isMob ? '100%' : width, maxHeight: '92vh',
boxShadow: 'var(--shadow-lg)', overflow: 'hidden', animation: 'popIn .22s var(--ease-out)',
display: 'flex', flexDirection: 'column',
}}>
{title}
{children}
{footer && (
{footer}
)}
);
};
const Banner = ({ tone = 'info', children, onClose }) => {
const s = { info: { bg: '#EEF3FA', fg: '#1F4A8A', border: '#C9D7EC', icon: 'info' }, success: { bg: '#E6F5F1', fg: '#005E4D', border: '#B5E3D7', icon: 'check' }, warn: { bg: '#FFF7EB', fg: '#7A4A00', border: '#FFD6A3', icon: 'warn' }, danger: { bg: '#FDECEC', fg: '#B3261E', border: '#F4C7C3', icon: 'warn' } }[tone];
return (
);
};
const Tabs = ({ tabs, active, onChange }) => {
const scrollRef = useRef(null);
const [overflow, setOverflow] = useState({ left: false, right: false });
const checkOverflow = () => {
const el = scrollRef.current;
if (!el) return;
setOverflow({
left: el.scrollLeft > 2,
right: el.scrollLeft + el.clientWidth < el.scrollWidth - 2,
});
};
useEffect(() => {
checkOverflow();
const el = scrollRef.current;
if (!el) return;
el.addEventListener('scroll', checkOverflow, { passive: true });
window.addEventListener('resize', checkOverflow);
return () => {
el.removeEventListener('scroll', checkOverflow);
window.removeEventListener('resize', checkOverflow);
};
}, [tabs.length]);
// Auto-scroll para a aba ativa ficar visível
useEffect(() => {
const el = scrollRef.current;
if (!el) return;
const btn = el.querySelector(`[data-tab-id="${active}"]`);
if (btn && btn.scrollIntoView) btn.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
}, [active]);
const scrollBy = (delta) => {
if (scrollRef.current) scrollRef.current.scrollBy({ left: delta, behavior: 'smooth' });
};
const arrowBtn = {
position: 'absolute', top: 0, bottom: 1, width: 32,
display: 'flex', alignItems: 'center', justifyContent: 'center',
border: 0, cursor: 'pointer', zIndex: 2,
color: 'var(--escalab-slate)',
};
return (
{tabs.map(t => (
))}
{/* Fade + seta esquerda */}
{overflow.left && (
<>
)}
{/* Fade + seta direita */}
{overflow.right && (
<>
)}
);
};
const ScoreBar = ({ nota, label, max = 5 }) => {
if (nota == null) return null;
const pct = (nota / max) * 100;
const color = nota >= 4.5 ? 'var(--escalab-brand-accent)' : nota >= 4 ? 'var(--escalab-brand)' : nota >= 3 ? '#E89B3B' : '#E05050';
return (
{label &&
{label}}
{nota.toFixed(1)}