Tema
{[['light','Claro','sun'],['dark','Oscuro','moon']].map(([v,l,ic]) => (
))}
Sidebar
{[[false,'Expandido'],[true,'Colapsado']].map(([v,l]) => (
))}
Color de acento
{ACCENTS.map(a => (
applyAccent(a.hue)}/>
))}
);
}
/* ══════════════════════════════════════════════════════════
APP ROOT
══════════════════════════════════════════════════════════ */
const TITLES = {
conexion:'Conexión WhatsApp', grupos:'Grupos y Listas', contactos:'Contactos',
envios:'Envíos', altas:'Altas de Participantes', usuarios:'Usuarios',
actividad:'Actividad', perfiles:'Perfiles',
};
function App() {
const saved = (() => { try { return JSON.parse(localStorage.getItem('wh_tweaks')||'{}'); } catch { return {}; } })();
const [tweaks, setTweaks] = useState({ ...TWEAK_DEFAULTS, ...saved });
const [auth, setAuth] = useState(false);
const [loading, setLoading] = useState(true);
const [user, setUser] = useState(null);
const [section, setSection] = useState(() => localStorage.getItem('wh_section') || 'conexion');
const [tweaksOpen, setTweaksOpen] = useState(false);
const [mobileNavOpen, setMobileNavOpen] = useState(false);
// Estado compartido del backend
const [whStatus, setWhStatus] = useState({ status:'stopped', hasQr:false, groupsCount:0, isSyncingGroups:false, lastError:null });
const [qrUrl, setQrUrl] = useState(null);
const [groups, setGroups] = useState([]);
const [contacts, setContacts] = useState([]);
const [groupLists, setGroupLists] = useState([]);
const [jobs, setJobs] = useState([]);
const realtimeRevokingRef = useRef(false);
const resetSessionState = () => {
setAuth(false);
setUser(null);
setWhStatus({ status:'stopped', hasQr:false, groupsCount:0, isSyncingGroups:false, lastError:null });
setQrUrl(null);
setGroups([]);
setContacts([]);
setGroupLists([]);
setJobs([]);
};
const revokeRealtimeSession = async (message) => {
if (realtimeRevokingRef.current) return;
realtimeRevokingRef.current = true;
if (message) {
window.showToast?.(message, 'warning');
}
try {
await sbClient.auth.signOut();
} catch {
resetSessionState();
}
};
/* ── Verificar sesión al cargar ── */
useEffect(() => {
sbClient.auth.getSession().then(async ({ data: { session } }) => {
if (session) {
try {
const res = await fetch('/api/me', {
headers: { 'Authorization': `Bearer ${session.access_token}` }
});
if (res.ok) {
const profile = await res.json();
setUser({ ...profile, session });
setAuth(true);
}
} catch { /* sesión inválida */ }
}
setLoading(false);
});
const { data: { subscription } } = sbClient.auth.onAuthStateChange(async (event, session) => {
if (event === 'TOKEN_REFRESHED' && session) {
setUser(prev => prev ? { ...prev, session } : prev);
}
if (event === 'SIGNED_OUT') {
realtimeRevokingRef.current = false;
resetSessionState();
}
});
return () => subscription.unsubscribe();
}, []);
/* ── Tema ── */
useEffect(() => {
document.documentElement.setAttribute('data-theme', tweaks.theme);
}, [tweaks.theme]);
/* ── Persistir sección ── */
useEffect(() => {
if (section !== 'perfiles') localStorage.setItem('wh_section', section);
}, [section]);
/* ── Edit mode protocol ── */
useEffect(() => {
const handler = e => {
if (e.data?.type === '__activate_edit_mode') setTweaksOpen(true);
if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false);
};
window.addEventListener('message', handler);
window.parent.postMessage({ type: '__edit_mode_available' }, '*');
return () => window.removeEventListener('message', handler);
}, []);
/* ── Socket.IO + carga inicial ── */
useEffect(() => {
if (!auth) return;
let mounted = true;
let socket = null;
(async () => {
const { data: { session } } = await sbClient.auth.getSession();
if (!mounted || !session?.access_token) return;
socket = io({
auth: { token: session.access_token }
});
socket.on('whatsapp:update', ({ event, payload, status }) => {
setWhStatus(status);
if (event === 'qr') setQrUrl(payload?.qr || null);
if (['ready','disconnected','authenticated'].includes(event)) setQrUrl(null);
if (event === 'groups' && Array.isArray(payload?.groups)) setGroups(payload.groups);
});
socket.on('groups:update', gs => setGroups(gs));
socket.on('jobs:init', js => setJobs(js));
socket.on('job:update', job => {
setJobs(prev => {
const idx = prev.findIndex(j => j.id === job.id);
if (idx === -1) return [job, ...prev].slice(0, 25);
const next = [...prev]; next[idx] = job; return next;
});
});
socket.on('session:revoked', ({ error }) => {
revokeRealtimeSession(error || 'Tu sesion en tiempo real dejo de ser valida.');
});
socket.on('connect_error', (error) => {
const message = String(error?.message || '').trim();
if (/token|sesion|autenticar|cuenta/i.test(message)) {
revokeRealtimeSession(message || 'No se pudo autenticar el canal en tiempo real.');
}
});
})();
apiFetch('/api/contacts').then(r => r.json()).then(setContacts).catch(() => {});
apiFetch('/api/group-lists').then(r => r.json()).then(setGroupLists).catch(() => {});
apiFetch('/api/jobs').then(r => r.json()).then(setJobs).catch(() => {});
return () => {
mounted = false;
socket?.disconnect();
};
}, [auth]);
const update = (key, value) => {
const next = { ...tweaks, [key]: value };
setTweaks(next);
localStorage.setItem('wh_tweaks', JSON.stringify(next));
window.parent.postMessage({ type:'__edit_mode_set_keys', edits:{ [key]:value } }, '*');
};
const toggleTheme = () => update('theme', tweaks.theme === 'light' ? 'dark' : 'light');
const toggleCollapse = () => {
if (window.innerWidth <= 860) {
setMobileNavOpen(v => !v);
} else {
update('collapsed', !tweaks.collapsed);
}
};
const navTo = (id) => {
setSection(id);
setMobileNavOpen(false); // cerrar drawer en móvil al navegar
};
const handleLogin = (profile) => { setUser(profile); setAuth(true); };
const handleLogout = async () => {
await sbClient.auth.signOut();
resetSessionState();
};
// Upsert: Socket.IO puede haber agregado el job antes que el response HTTP
const onJobCreated = job => setJobs(prev => {
if (prev.some(j => j.id === job.id)) return prev; // ya existe, no duplicar
return [job, ...prev].slice(0, 25);
});
// Redirigir a sección válida si el rol no tiene acceso
useEffect(() => {
if (!user) return;
const role = user.role || 'agente';
const allowed = NAV.filter(n => n.roles.includes(role)).map(n => n.id);
if (!allowed.includes(section) && section !== 'perfiles') setSection(allowed[0] || 'conexion');
}, [user]);
// Cerrar drawer móvil al rotar a desktop
useEffect(() => {
const mq = window.matchMedia('(max-width: 860px)');
const handler = e => { if (!e.matches) setMobileNavOpen(false); };
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
}, []);
const renderSection = () => {
const shared = {
whStatus, qrUrl, groups, contacts, groupLists, jobs,
onGroupsChange: setGroups,
onContactsChange: setContacts,
onGroupListsChange: setGroupLists,
onJobCreated,
};
const map = {
conexion:
,
grupos:
,
contactos:
,
envios:
,
altas:
,
usuarios:
,
actividad:
,
perfiles:
setUser(prev => ({ ...prev, ...updates }))} />,
};
return map[section] || Sección no encontrada
;
};
/* ── Pantalla de carga inicial ── */
if (loading) {
return (
);
}
if (!auth) {
return ;
}
return (
<>
{/* Backdrop para drawer móvil */}
setMobileNavOpen(false)}
/>
{TITLES[section] || section}
{renderSection()}
setTweaksOpen(false)} tweaks={tweaks} update={update}/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render();