/* Shared atoms / icons for MedFlow */
const Logo = ({ tone = 'dark', size = 'md' }) => {
const big = size === 'lg';
const dark = tone === 'dark';
return (
);
};
const I = {
search: (p) => ,
chevL: (p) => ,
chevR: (p) => ,
chevD: (p) => ,
check: (p) => ,
plus: (p) => ,
bell: (p) => ,
clock: (p) => ,
pin: (p) => ,
video: (p) => ,
user: (p) => ,
grid: (p) => ,
cal: (p) => ,
chart: (p) => ,
users: (p) => ,
cog: (p) => ,
arrowUp: (p) => ,
arrowDn: (p) => ,
dot: (p) => ,
more: (p) => ,
shield:(p) => ,
download:(p)=> ,
filter:(p) => ,
};
const Badge = ({ tone='neutral', children }) => {
const tones = {
neutral: 'bg-slate-100 text-slate-700 ring-slate-200',
mint: 'bg-mint-100 text-mint-700 ring-mint-200',
midnight:'bg-midnight-50 text-midnight-700 ring-midnight-100',
amber: 'bg-amber-50 text-amber-700 ring-amber-200',
rose: 'bg-rose-50 text-rose-700 ring-rose-200',
};
return (
{children}
);
};
const StatusDot = ({ tone='mint' }) => {
const c = { mint:'bg-mint-500', amber:'bg-amber-500', rose:'bg-rose-500', slate:'bg-slate-400', midnight:'bg-midnight-600' }[tone];
return ;
};
const NavItem = ({ icon, label, active, badge, onClick }) => (
{icon}
{label}
{badge && {badge}}
);
/* ── TopNav: barra superior reutilizable para vistas de empleado ── */
const TopNav = ({ user, currentView, onNavigate, onLogout }) => {
if (!user) return null;
const initials = user.full_name.split(' ').map(n => n[0]).slice(0,2).join('').toUpperCase();
const firstName = user.full_name.split(' ')[0];
const links = [
{ key: 'patient', label: 'Agendar', path: '/agendar' },
{ key: 'employee', label: 'Mis citas', path: '/mis-citas' },
{ key: 'beneficiaries', label: 'Beneficiarios', path: '/beneficiarios' },
];
return (
);
};
Object.assign(window, { Logo, I, Badge, StatusDot, NavItem, TopNav });