/* perla dashboard · Home · shared primitives + icons */
const { useState, useEffect, useMemo, useRef } = React;
/* ── Icons (lucide-compatible, stroke 1.5) ───────────────────────── */
const Icon = ({ size = 22, children, stroke, ...rest }) => (
);
const Icons = {
home: () => ,
calendar: () => ,
users: () => ,
message: () => ,
settings: () => ,
plus: ({ size = 20 }) => ,
phone: ({ size = 14 }) => ,
search: ({ size = 16 }) => ,
chev: ({ size = 14 }) => ,
chevDown: ({ size = 14 }) => ,
arrowUp: ({ size = 12 }) => ,
arrowDown: ({ size = 12 }) => ,
back: ({ size = 18 }) => ,
x: ({ size = 14 }) => ,
clock: ({ size = 15 }) => ,
check: ({ size = 15 }) => ,
checkCircle: ({ size = 15 }) => ,
user: ({ size = 15 }) => ,
sparkle: ({ size = 15 }) => ,
alert: ({ size = 16 }) => ,
trend: ({ size = 14 }) => ,
scissors: ({ size = 14 }) => ,
};
/* ── Color palette for avatars (only from brand palette) ────────── */
const AVATAR_COLORS = ['#2D7A7A', '#A88760', '#5B4B7A', '#4F7C80', '#4C5A8C', '#6B4F99'];
const avatarBg = (name) => AVATAR_COLORS[name.charCodeAt(0) % AVATAR_COLORS.length];
const initials = (name) => name.split(' ').slice(0,2).map(s => s[0]).join('').toUpperCase();
/* ── Brand ──────────────────────────────────────────────────────── */
const BrandMark = () => (
perla
);
/* ── Status bar (purely visual) ─────────────────────────────────── */
const StatusBar = () => {
const [now, setNow] = useState(() => {
const d = new Date();
return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
});
useEffect(() => {
const id = setInterval(() => {
const d = new Date();
setNow(`${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`);
}, 30000);
return () => clearInterval(id);
}, []);
return (
);
};
/* ── Top bar with global "Nuevo turno" ──────────────────────────── */
const TopBar = ({ onNewTurn }) => (
);
/* ── Bottom nav — label only on active ──────────────────────────── */
const NAV = [
{ id:'home', icon:'home', label:'Home', href:'index.html' },
{ id:'agenda', icon:'calendar', label:'Agenda', href:'Agenda.html' },
{ id:'clientes', icon:'users', label:'Clientes', href:'Clientes.html' },
{ id:'mensajes', icon:'message', label:'Mensajes', href:'Mensajes.html' },
{ id:'config', icon:'settings', label:'Configuración', href:'Configuracion.html' },
];
const BottomNav = ({ active, onSelect }) => (
);
/* ── Badge ──────────────────────────────────────────────────────── */
const statusClass = { confirmed: 'conf', pending: 'pend', cancelled: 'canc' };
const statusLabel = { confirmed: 'Confirmada', pending: 'Pendiente', cancelled: 'Cancelada' };
const Badge = ({ status }) => {statusLabel[status]};
Object.assign(window, { Icons, avatarBg, initials, BrandMark, StatusBar, TopBar, BottomNav, NAV, Badge, statusClass, statusLabel });