{u.name.split(' ').map(n=>n[0]).slice(0,2).join('')}
{u.name}
{u.position} · {comp?.name}
toast('AnyDesk copiado ✓')} />
{u.email&&{u.email}}
{u.phone&&{u.phone}}
{u.stickerId && (
window.imprimirSticker && window.imprimirSticker(u, comp)}>Imprimir
{
if (!confirm('¿Generar nuevo sticker y PIN? El anterior dejará de funcionar.')) return;
const ALPHA='ABCDEFGHJKMNPQRSTUVWXYZ';
let nid=''; for (let i=0;i<5;i++) nid+=ALPHA[Math.floor(Math.random()*ALPHA.length)];
const npin=String(Math.floor(Math.random()*900000)+100000);
const nd={...data, users: data.users.map(x=>x.id===u.id?{...x, stickerId:nid, pin:npin}:x)};
setData(nd); DB.saveData(nd);
toast('Nuevo sticker generado');
}}>Regenerar
)}
{window.Launchers &&
}
Editar
{tele?(tele.online?'En línea':'Desconectado'):'Sin agente'}
{tele && visto {DB.timeAgo(tele.last_seen)}}
{tele ? (
{metric('CPU', tele.cpu_pct!=null?tele.cpu_pct+'%':'—', Number(tele.cpu_pct)||0, 100)}
{metric('RAM', gb(tele.ram_used)+' / '+gb(tele.ram_total), Number(tele.ram_used), Number(tele.ram_total))}
{metric('Disco', gb(tele.disk_used)+' / '+gb(tele.disk_total), Number(tele.disk_used), Number(tele.disk_total))}
) : Instala el agente Infinitos Remote en este equipo para ver CPU/RAM/disco en vivo.
}
{(eq.warrantyExpiry||eq.licenseExpiry||eq.purchaseDate) &&
{eq.purchaseDate && Comprado {eq.purchaseDate}}
{expChip('Garantía',eq.warrantyExpiry)}
{expChip('Licencia',eq.licenseExpiry)}
}
{tele && tele.extra && (tele.extra.cpuModel || tele.extra.softwareCount!=null) && (
Inventario automático
detectado por el agente
{tele.extra.cpuModel && infoBox('Procesador (real)', tele.extra.cpuModel + (tele.extra.cpuCores?(' · '+tele.extra.cpuCores+' núcleos'):''))}
{tele.extra.osDetail && infoBox('Sistema operativo', tele.extra.osDetail)}
{tele.extra.loggedUsers && tele.extra.loggedUsers.length>0 && infoBox('Sesión activa', tele.extra.loggedUsers.join(', '))}
{tele.extra.softwareCount!=null && infoBox('Software instalado', tele.extra.softwareCount + ' programas')}
{tele.extra.software && tele.extra.software.length>0 && (
Ver software ({tele.extra.software.length} de {tele.extra.softwareCount})
{tele.extra.software.map((sw,i)=>
{sw}
)}
)}
)}
{tele && (
Acciones remotas
vía agente · seguro
{[{k:'uptime',l:'Uptime'},{k:'disk',l:'Disco'},{k:'procs',l:'Procesos'},{k:'sessions',l:'Sesiones'},{k:'netinfo',l:'Red'},{k:'cleanup',l:'Limpiar temp'}].map(a=>(
))}
{cmds.slice(0,5).map(c=>(
{c.status}
{c.requested_by}
{c.output &&
{c.output}}
))}
)}
{eq.brand} {eq.model}
{specs.map(s=>s.val&&(
))}
Licencias de software
{eq.licenses}
)}
{u.notes&&(
Notas
{u.notes}
)}
Tickets ({userTickets.length})
{userTickets.length===0 ? Sin tickets
:
userTickets.map((t,i)=>(
navigate('tickets',{ticketId:t.id})}
style={{padding:'10px 16px',borderBottom:i
e.currentTarget.style.background='#f8fafc'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
{t.title}
{window.Timeline && window.Features && (
Historial del equipo
)}
);
}
Object.assign(window, { Users, UserDetail });
/* ===== js/Tickets.jsx ===== */
function TicketForm({ initial={}, companies=[], users=[], onSave, onCancel }) {
const [form, setForm] = React.useState({
companyId:'', userId:'', title:'', description:'', status:'open', priority:'medium', ...initial
});
const set = k => v => setForm(f=>({...f,[k]:v}));
const compUsers = users.filter(u=>u.companyId===form.companyId);
return (
Cancelar
form.title.trim()&&form.companyId&&onSave(form)}>Guardar ticket
);
}
function Tickets({ data, setData, navigate, toast, initialTicketId=null }) {
const { companies, users, tickets } = data;
const [search, setSearch] = React.useState('');
const [statusFilter, setStatus] = React.useState('');
const [priorityFilter, setPrio] = React.useState('');
const [compFilter, setComp] = React.useState('');
const [showAdd, setShowAdd] = React.useState(false);
const [selected, setSelected] = React.useState(initialTicketId);
const [editId, setEditId] = React.useState(null);
const [deleteId, setDeleteId] = React.useState(null);
const [noteText, setNoteText] = React.useState('');
const [tecnicos, setTecnicos] = React.useState([]);
React.useEffect(()=>{ fetch('/api/usuarios',{credentials:'include'}).then(r=>r.ok?r.json():[]).then(d=>setTecnicos(Array.isArray(d)?d:[])).catch(()=>{}); },[]);
const tecName = (id)=>{ const u=tecnicos.find(x=>String(x.id)===String(id)); return u?(u.nombre||u.username):null; };
const patchField = (id, patch, note)=>{ const now=new Date().toISOString(); setData(d=>{ const nd={...d, tickets:d.tickets.map(t=>t.id===id?{...t,...patch,updatedAt:now,history:note?[...(t.history||[]),{date:now,note,author:'Soporte IT'}]:(t.history||[])}:t)}; DB.saveData(nd); return nd; }); };
const fLbl = {fontSize:11,fontWeight:700,color:'#94a3b8',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:4};
const fInp = {width:'100%',padding:'6px 8px',border:'1.5px solid #e2e8f0',borderRadius:7,fontSize:12,fontFamily:'inherit',boxSizing:'border-box',background:'#fff'};
React.useEffect(()=>{ if(initialTicketId) setSelected(initialTicketId); },[initialTicketId]);
const priorityColor = { urgent:'red', high:'orange', medium:'yellow', low:'slate' };
const priorityLabel = { urgent:'Urgente', high:'Alta', medium:'Media', low:'Baja' };
const statusColor = { open:'orange', in_progress:'blue', resolved:'green' };
const statusLabel = { open:'Abierto', in_progress:'En progreso', resolved:'Resuelto' };
const SLA_HOURS = { urgent: 4, high: 8, medium: 24, low: 72 };
const slaInfo = (t) => {
const target = SLA_HOURS[t.priority] ?? 24;
const created = new Date(t.createdAt).getTime();
if (!created) return null;
if (t.status === 'resolved') {
const ok = (new Date(t.updatedAt).getTime() - created) <= target*3600e3;
return { label: ok ? 'SLA cumplido' : 'SLA incumplido', color: ok ? 'green' : 'red' };
}
const remH = target - (Date.now() - created)/3600e3;
if (remH < 0) return { label: 'SLA vencido ' + Math.round(-remH) + 'h', color: 'red' };
if (remH < target*0.25) return { label: 'Vence en ' + Math.ceil(remH) + 'h', color: 'yellow' };
return { label: 'En SLA · ' + Math.ceil(remH) + 'h', color: 'green' };
};
const filtered = tickets.filter(t=>{
const q = search.toLowerCase();
const matchQ = !q || t.title.toLowerCase().includes(q) || t.description.toLowerCase().includes(q);
const matchS = !statusFilter || t.status===statusFilter;
const matchP = !priorityFilter || t.priority===priorityFilter;
const matchC = !compFilter || t.companyId===compFilter;
return matchQ && matchS && matchP && matchC;
}).sort((a,b)=>{
const pOrd = {urgent:0,high:1,medium:2,low:3};
if(a.status!=='resolved'&&b.status==='resolved') return -1;
if(a.status==='resolved'&&b.status!=='resolved') return 1;
return (pOrd[a.priority]||2)-(pOrd[b.priority]||2);
});
const selectedTicket = tickets.find(t=>t.id===selected);
function addTicket(form) {
const now = new Date().toISOString();
const t = { ...form, id: DB.generateId('t'), createdAt:now, updatedAt:now, history:[{date:now,note:'Ticket creado',author:'Sistema'}] };
setData(d=>{ const nd={...d,tickets:[t,...d.tickets]}; DB.saveData(nd); return nd; });
setShowAdd(false); setSelected(t.id); toast('Ticket creado');
}
function saveEdit(form) {
const now = new Date().toISOString();
setData(d=>{ const nd={...d,tickets:d.tickets.map(t=>t.id===editId?{...t,...form,updatedAt:now}:t)}; DB.saveData(nd); return nd; });
setEditId(null); toast('Ticket actualizado');
}
function deleteTicket() {
setData(d=>{ const nd={...d,tickets:d.tickets.filter(t=>t.id!==deleteId)}; DB.saveData(nd); return nd; });
setDeleteId(null); setSelected(null); toast('Ticket eliminado','error');
}
function changeStatus(ticketId, newStatus) {
const now = new Date().toISOString();
const statusLabel2 = {open:'Abierto',in_progress:'En progreso',resolved:'Resuelto'};
setData(d=>{ const nd={...d,tickets:d.tickets.map(t=>t.id===ticketId?{...t,status:newStatus,updatedAt:now,history:[...(t.history||[]),{date:now,note:`Estado cambiado a: ${statusLabel2[newStatus]}`,author:'Soporte IT'}]}:t)}; DB.saveData(nd); return nd; });
toast('Estado actualizado');
}
function addNote(ticketId) {
if(!noteText.trim()) return;
const now = new Date().toISOString();
setData(d=>{ const nd={...d,tickets:d.tickets.map(t=>t.id===ticketId?{...t,updatedAt:now,history:[...(t.history||[]),{date:now,note:noteText.trim(),author:'Soporte IT'}]}:t)}; DB.saveData(nd); return nd; });
setNoteText(''); toast('Nota agregada');
}
const getCompany = id => companies.find(c=>c.id===id);
const getUser = id => users.find(u=>u.id===id);
return (
Tickets / Incidencias
{tickets.filter(t=>t.status!=='resolved').length} abierto{tickets.filter(t=>t.status!=='resolved').length!==1?'s':''} · {tickets.filter(t=>t.status==='resolved').length} resuelto{tickets.filter(t=>t.status==='resolved').length!==1?'s':''}
setShowAdd(true)}>Nuevo ticket
setSearch(e.target.value)} placeholder="Buscar ticket..."
style={{width:'100%',paddingLeft:34,paddingRight:12,paddingTop:9,paddingBottom:9,border:'1.5px solid #e2e8f0',borderRadius:9,fontSize:13,fontFamily:'inherit',outline:'none',background:'#fff',boxSizing:'border-box'}}
onFocus={e=>e.target.style.borderColor='#2563eb'} onBlur={e=>e.target.style.borderColor='#e2e8f0'} />
{/* List */}
{filtered.length===0 ? (
setShowAdd(true)}>Crear ticket} />
) : filtered.map((t,i)=>{
const comp = getCompany(t.companyId);
const user = getUser(t.userId);
const sla = slaInfo(t);
const isActive = selected===t.id;
return (
setSelected(isActive?null:t.id)}
style={{padding:'14px 18px',borderBottom:i
{if(!isActive)e.currentTarget.style.background='#f8fafc'}}
onMouseLeave={e=>{if(!isActive)e.currentTarget.style.background='transparent'}}>
{t.title}
{comp?.name}{user?` · ${user.name}`:''}
{sla && }
{t.assigneeId && · {tecName(t.assigneeId)||'asignado'}}
{DB.timeAgo(t.updatedAt)}
{/* Detail panel */}
{selectedTicket && (
{selectedTicket.title}
Empresa: {getCompany(selectedTicket.companyId)?.name||'—'}
{selectedTicket.userId&&
Usuario: {getUser(selectedTicket.userId)?.name||'—'}
}
{selectedTicket.description}
{/* Status buttons */}
{['open','in_progress','resolved'].map(s=>(
))}
{/* Asignacion / gestion */}
{/* History */}
Historial
{(selectedTicket.history||[]).map((h,i)=>(
{h.note}
{DB.formatDateTime(h.date)} · {h.author}
))}
{/* Add note */}
{/* Ticket Tools Panel */}
c.id===selectedTicket.companyId)}
user={users.find(u=>u.id===selectedTicket.userId)}/>
)}
);
}
window.Tickets = Tickets;
/* ===== js/Credentials.jsx ===== */
function CredentialForm({ initial={}, companies=[], users=[], onSave, onCancel }) {
const [form, setForm] = React.useState({
companyId:'', userId:'', service:'', username:'', password:'', url:'', notes:'', ...initial
});
const [showPwd, setShowPwd] = React.useState(false);
const pwScore = (p)=>{ if(!p) return 0; let v=0; if(p.length>=8)v++; if(p.length>=12)v++; if(/[A-Z]/.test(p)&&/[a-z]/.test(p))v++; if(/[0-9]/.test(p))v++; if(/[^A-Za-z0-9]/.test(p))v++; return Math.min(v,4); };
const genPw = ()=>{ const cs='ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#$%&*'; const a=new Uint32Array(16); crypto.getRandomValues(a); let p=''; for(let i=0;i<16;i++)p+=cs[a[i]%cs.length]; set('password')(p); setShowPwd(true); };
const set = k => v => setForm(f=>({...f,[k]:v}));
const compUsers = users.filter(u=>u.companyId===form.companyId);
return (
set('password')(e.target.value)}
placeholder="Contraseña segura"
style={{width:'100%',paddingRight:40,paddingLeft:12,paddingTop:9,paddingBottom:9,border:'1.5px solid #e2e8f0',borderRadius:8,fontSize:14,fontFamily:'monospace',outline:'none',background:'#fff',color:'#0f172a',boxSizing:'border-box',transition:'border-color 0.15s'}}
onFocus={e=>e.target.style.borderColor='#2563eb'} onBlur={e=>e.target.style.borderColor='#e2e8f0'} />
{form.password && (()=>{ const sc=pwScore(form.password); const cols=['#ef4444','#f59e0b','#eab308','#22c55e']; const lbls=['Débil','Regular','Buena','Fuerte']; const idx=Math.max(0,sc-1); return (
{[0,1,2,3].map(i=>
)}
Fuerza: {lbls[idx]}
); })()}
Cancelar
(form.service.trim()&&form.username.trim()&&form.companyId)&&onSave(form)}>Guardar credencial
);
}
function Credentials({ data, setData, navigate, toast }) {
const { companies, users, credentials } = data;
const [search, setSearch] = React.useState('');
const [compFilter, setComp] = React.useState('');
const [showAdd, setShowAdd] = React.useState(false);
const [editId, setEditId] = React.useState(null);
const [deleteId, setDeleteId] = React.useState(null);
const [visiblePwds, setVisible] = React.useState({});
const filtered = credentials.filter(cr=>{
const q = search.toLowerCase();
const matchQ = !q || cr.service.toLowerCase().includes(q) || cr.username.toLowerCase().includes(q) || (cr.url||'').toLowerCase().includes(q) || (cr.notes||'').toLowerCase().includes(q);
const matchC = !compFilter || cr.companyId===compFilter;
return matchQ && matchC;
});
function addCred(form) {
const cr = { ...form, id: DB.generateId('cr'), lastChanged: new Date().toISOString() };
setData(d=>{ const nd={...d,credentials:[...d.credentials,cr]}; DB.saveData(nd); return nd; });
setShowAdd(false); toast('Credencial guardada');
}
function saveEdit(form) {
setData(d=>{ const nd={...d,credentials:d.credentials.map(cr=>cr.id===editId?{...cr,...form,lastChanged: form.password!==cr.password?new Date().toISOString():(cr.lastChanged||null)}:cr)}; DB.saveData(nd); return nd; });
setEditId(null); toast('Credencial actualizada');
}
function deleteCred() {
setData(d=>{ const nd={...d,credentials:d.credentials.filter(cr=>cr.id!==deleteId)}; DB.saveData(nd); return nd; });
setDeleteId(null); toast('Credencial eliminada','error');
}
function copyText(text, label) {
navigator.clipboard.writeText(text).then(()=>toast(`${label} copiado ✓`));
}
function togglePwd(id) { setVisible(v=>({...v,[id]:!v[id]})); }
const getCompany = id => companies.find(c=>c.id===id);
const getUser = id => users.find(u=>u.id===id);
const grouped = {};
filtered.forEach(cr=>{
const key = cr.companyId || 'none';
if(!grouped[key]) grouped[key]=[];
grouped[key].push(cr);
});
return (
Credenciales / Contraseñas
{credentials.length} credencial{credentials.length!==1?'es':''} almacenada{credentials.length!==1?'s':''}
setShowAdd(true)}>Nueva credencial
Aviso de seguridad: Las contraseñas se almacenan en localStorage. Para producción, usa cifrado en tu servidor.
setSearch(e.target.value)} placeholder="Buscar servicio, usuario, URL..."
style={{width:'100%',paddingLeft:34,paddingRight:12,paddingTop:9,paddingBottom:9,border:'1.5px solid #e2e8f0',borderRadius:9,fontSize:13,fontFamily:'inherit',outline:'none',background:'#fff',boxSizing:'border-box'}}
onFocus={e=>e.target.style.borderColor='#2563eb'} onBlur={e=>e.target.style.borderColor='#e2e8f0'} />
{filtered.length===0 ? (
setShowAdd(true)}>Agregar credencial} />
) : (
Object.entries(grouped).map(([compId, creds])=>{
const comp = getCompany(compId);
return (
{(comp?.name||'?').charAt(0)}
{comp?.name||'Sin empresa'}
{creds.length} credencial{creds.length!==1?'es':''}
{creds.map((cr,i)=>{
const user = getUser(cr.userId);
const pwdVisible = visiblePwds[cr.id];
return (
{cr.service}
{user&&}
{cr.url&&
{cr.url}
}
{/* Username */}
Usuario
{cr.username}
{/* Password */}
Contraseña
{pwdVisible ? cr.password : '••••••••••'}
{cr.notes&&
{cr.notes}
}
);
})}
);
})
)}
setShowAdd(false)} title="Nueva credencial" width={540}>
setShowAdd(false)} />
setEditId(null)} title="Editar credencial" width={540}>
{editId && c.id===editId)} companies={companies} users={users} onSave={saveEdit} onCancel={()=>setEditId(null)} />}
setDeleteId(null)} />
);
}
window.Credentials = Credentials;
/* ===== js/Maintenance.jsx ===== */
function MaintenanceForm({ initial={}, companies=[], onSave, onCancel }) {
const today = new Date().toISOString().split('T')[0];
const [form, setForm] = React.useState({
companyId:'', title:'', type:'preventivo', scheduledDate:today,
completedDate:'', status:'pending', technician:'Soporte IT', frequency:'none', notes:'', ...initial
});
const set = k => v => setForm(f=>({...f,[k]:v}));
return (
);
}
function Maintenances({ data, setData, navigate, toast, initialCompanyId=null }) {
const { companies, maintenances: allMaint = [] } = data;
const [search, setSearch] = React.useState('');
const [compFilter, setCompFilter] = React.useState(initialCompanyId||'');
const [typeFilter, setTypeFilter] = React.useState('');
const [statusFilter, setStatus] = React.useState('');
const [showAdd, setShowAdd] = React.useState(false);
const [editId, setEditId] = React.useState(null);
const [deleteId, setDeleteId] = React.useState(null);
const [view, setView] = React.useState('list'); // list | calendar
const typeLabel = {preventivo:'Preventivo',correctivo:'Correctivo',revision:'Revisión',instalacion:'Instalación',visita:'Visita'};
const typeColor = {preventivo:'blue',correctivo:'red',revision:'purple',instalacion:'green',visita:'orange'};
const statusLabel = {pending:'Pendiente',completed:'Completado',cancelled:'Cancelado'};
const statusColor = {pending:'blue',completed:'green',cancelled:'slate'};
const filtered = allMaint.filter(m=>{
const q = search.toLowerCase();
const matchQ = !q || m.title.toLowerCase().includes(q) || (m.notes||'').toLowerCase().includes(q);
const matchC = !compFilter || m.companyId===compFilter;
const matchT = !typeFilter || m.type===typeFilter;
const matchS = !statusFilter || m.status===statusFilter;
return matchQ && matchC && matchT && matchS;
}).sort((a,b)=>new Date(a.scheduledDate)-new Date(b.scheduledDate));
const upcoming = filtered.filter(m=>m.status==='pending' && new Date(m.scheduledDate) >= new Date());
const overdue = filtered.filter(m=>m.status==='pending' && new Date(m.scheduledDate) < new Date());
const done = filtered.filter(m=>m.status==='completed');
function addMaint(form) {
const m = {...form, id:DB.generateId('m')};
setData(d=>{ const nd={...d,maintenances:[...(d.maintenances||[]),m]}; DB.saveData(nd); return nd; });
setShowAdd(false); toast('Mantenimiento agendado');
}
function saveEdit(form) {
setData(d=>{ const nd={...d,maintenances:(d.maintenances||[]).map(m=>m.id===editId?{...m,...form}:m)}; DB.saveData(nd); return nd; });
setEditId(null); toast('Mantenimiento actualizado');
}
function deleteMaint() {
setData(d=>{ const nd={...d,maintenances:(d.maintenances||[]).filter(m=>m.id!==deleteId)}; DB.saveData(nd); return nd; });
setDeleteId(null); toast('Mantenimiento eliminado','error');
}
function markDone(id) {
const today = new Date().toISOString().split('T')[0];
setData(d=>{
const list = (d.maintenances||[]);
const done = list.find(m=>m.id===id);
let next = list.map(m=>m.id===id?{...m,status:'completed',completedDate:today}:m);
const add = {monthly:1,quarterly:3,biannual:6,annual:12}[done&&done.frequency];
if (done && add) {
const base = new Date(done.scheduledDate); base.setMonth(base.getMonth()+add);
next = [...next, {...done, id:DB.generateId('mnt'), status:'pending', completedDate:'', scheduledDate: base.toISOString().split('T')[0]}];
}
const nd={...d,maintenances:next}; DB.saveData(nd); return nd;
});
toast('Marcado como completado ✓');
}
const getCompany = id => companies.find(c=>c.id===id);
function MaintCard({ m }) {
const comp = getCompany(m.companyId);
const isOverdue = m.status==='pending' && new Date(m.scheduledDate) < new Date();
return (
e.currentTarget.style.background='#f8fafc'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
{m.title}
{comp?.name||'—'}
{m.technician && · {m.technician}}
{isOverdue?'⚠ Vencido: ':'📅 '}{DB.formatDate(m.scheduledDate)}
{m.status==='completed'&&m.completedDate&&✓ {DB.formatDate(m.completedDate)}}
{m.notes&&
{m.notes}
}
{m.status==='pending'&&}
);
}
// Mini calendar view (current month)
function CalendarView() {
const now = new Date();
const [calYear, setCalYear] = React.useState(now.getFullYear());
const [calMonth, setCalMonth] = React.useState(now.getMonth());
const firstDay = new Date(calYear, calMonth, 1).getDay();
const daysInMonth = new Date(calYear, calMonth+1, 0).getDate();
const monthName = new Date(calYear, calMonth).toLocaleDateString('es-MX',{month:'long',year:'numeric'});
const monthMaint = allMaint.filter(m=>{
const d = new Date(m.scheduledDate);
return d.getFullYear()===calYear && d.getMonth()===calMonth;
});
function getDayMaint(day) {
return monthMaint.filter(m=>new Date(m.scheduledDate).getDate()===day);
}
return (
{monthName}
{['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'].map(d=>(
{d}
))}
{Array.from({length:firstDay}).map((_,i)=>
)}
{Array.from({length:daysInMonth}).map((_,i)=>{
const day = i+1;
const dayMaint = getDayMaint(day);
const isToday = new Date().getDate()===day && new Date().getMonth()===calMonth && new Date().getFullYear()===calYear;
return (
{day}
{dayMaint.slice(0,2).map(m=>(
{m.title.substring(0,14)}{m.title.length>14?'…':''}
))}
{dayMaint.length>2&&
+{dayMaint.length-2} más
}
);
})}
);
}
return (
Mantenimientos / Visitas
{upcoming.length} próximo{upcoming.length!==1?'s':''} · {overdue.length} vencido{overdue.length!==1?'s':''} · {done.length} completado{done.length!==1?'s':''}
{[{v:'list',icon:'menu'},{v:'calendar',icon:'chart-bar'}].map(b=>(
))}
setShowAdd(true)}>Agendar mantenimiento
{/* Stats */}
{[
{label:'Total',val:allMaint.length,color:'#2563eb',bg:'#eff6ff'},
{label:'Próximos',val:upcoming.length,color:'#7c3aed',bg:'#faf5ff'},
{label:'Vencidos',val:overdue.length,color:'#dc2626',bg:'#fef2f2'},
{label:'Completados',val:done.length,color:'#16a34a',bg:'#f0fdf4'},
].map(s=>(
))}
{/* Filters */}
setSearch(e.target.value)} placeholder="Buscar mantenimiento..."
style={{width:'100%',paddingLeft:34,paddingRight:12,paddingTop:9,paddingBottom:9,border:'1.5px solid #e2e8f0',borderRadius:9,fontSize:13,fontFamily:'inherit',outline:'none',background:'#fff',boxSizing:'border-box'}}
onFocus={e=>e.target.style.borderColor='#2563eb'} onBlur={e=>e.target.style.borderColor='#e2e8f0'} />
{view==='calendar' ?
: (
filtered.length===0 ? (
setShowAdd(true)}>Agendar mantenimiento} />
) : (
{overdue.length>0&&(
Vencidos ({overdue.length})
{overdue.map(m=>)}
)}
{upcoming.length>0&&(
Próximos ({upcoming.length})
{upcoming.map(m=>)}
)}
{done.length>0&&(
Completados ({done.length})
{done.map(m=>)}
)}
);
}
window.Maintenances = Maintenances;