${item.subtitle.replace(/` : ''}
${item.action || 'Otvoriť'} →
`;
document.body.appendChild(el);
const close = () => { el.classList.add('fade'); setTimeout(() => el.remove(), 300); };
el.querySelector('.notif-toast-close').addEventListener('click', close);
el.querySelector('.notif-toast-action').addEventListener('click', close);
setTimeout(close, 7000);
} catch {}
}
function showBrowserNotification(item) {
try {
if (!('Notification' in window)) return;
if (Notification.permission !== 'granted') return;
const n = new Notification(item.title || 'ERP', {
body: item.subtitle || '',
icon: (window.currentBranding?.favicon_url) || '/favicon.ico',
tag: item.id,
});
n.onclick = () => { window.focus(); if (item.link) window.location.hash = item.link.replace(/^#/, ''); n.close(); };
} catch {}
}
function NotificationBell() {
const [open, setOpen] = React.useState(false);
const [items, setItems] = React.useState([]);
const [lastSeen, setLastSeen] = React.useState(() => {
try { return localStorage.getItem('dd_notif_seen'); } catch { return null; }
});
const prevIdsRef = React.useRef(null); // null = first fetch (don't ding)
const ref = React.useRef(null);
async function fetchNow() {
try {
const r = await fetch('/api/notifications', { credentials: 'same-origin' });
if (!r.ok) return;
const j = await r.json();
const next = j.items || [];
// Detect newly arrived items (present now but not in the previous snapshot).
if (prevIdsRef.current) {
const prev = prevIdsRef.current;
const arrived = next.filter(i => !prev.has(i.id));
if (arrived.length > 0) {
playNotifDing();
// Show toast for the most recent (first in sorted list)
showNotifToast(arrived[0]);
showBrowserNotification(arrived[0]);
}
}
prevIdsRef.current = new Set(next.map(i => i.id));
setItems(next);
} catch {}
}
React.useEffect(() => {
fetchNow();
const id = setInterval(fetchNow, 30_000); // faster polling (30s instead of 60s)
// Also refresh when tab regains focus — admin sees incoming requests asap
const onVis = () => { if (document.visibilityState === 'visible') fetchNow(); };
document.addEventListener('visibilitychange', onVis);
return () => { clearInterval(id); document.removeEventListener('visibilitychange', onVis); };
// eslint-disable-next-line
}, []);
// Ask for browser notification permission on first bell open (one time).
function maybeAskPermission() {
try {
if ('Notification' in window && Notification.permission === 'default') {
Notification.requestPermission();
}
} catch {}
}
React.useEffect(() => {
const on = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', on);
return () => document.removeEventListener('mousedown', on);
}, []);
// Mark all as "seen" when dropdown opens — badge clears.
function openDropdown() {
setOpen(v => {
const next = !v;
if (next) {
const now = new Date().toISOString();
setLastSeen(now);
try { localStorage.setItem('dd_notif_seen', now); } catch {}
maybeAskPermission();
}
return next;
});
}
const unreadCount = lastSeen
? items.filter(i => i.ts && new Date(i.ts) > new Date(lastSeen)).length
: items.length;
return (
}
{open && (
Notifikácie
{items.length} {items.length === 1 ? 'položka' : 'položiek'}
{items.length === 0 ? (
🎉 Žiadne nové udalosti.
) : (
)}
)}
);
}
function NotifSoundToggle() {
const [on, setOn] = React.useState(() => localStorage.getItem('dd_notif_sound') !== 'off');
function toggle() {
const next = !on;
setOn(next);
try { localStorage.setItem('dd_notif_sound', next ? 'on' : 'off'); } catch {}
// Preview the ding when turning on
if (next) playNotifDing();
}
return (
{on ? '🔔 Zvuk zapnutý' : '🔕 Zvuk vypnutý'}
);
}
function relTime(iso) {
if (!iso) return '';
const t = new Date(iso).getTime();
const s = Math.max(0, Math.floor((Date.now() - t) / 1000));
if (s < 60) return 'teraz';
if (s < 3600) return `pred ${Math.floor(s/60)} min`;
if (s < 86400) return `pred ${Math.floor(s/3600)} h`;
return `pred ${Math.floor(s/86400)} dňami`;
}
// ───── Sidebar ─────
// Items map to module slugs in the DB; if a module is disabled (or missing in session.modules),
// we hide the sidebar row. Core modules (users/modules/integrations/settings) can't be disabled.
function Sidebar({ active = 'dashboard' }) {
// Each sidebar item maps to (1) the module slug (for enable/disable) and
// (2) the permission key required to see it. Admin has '*' which matches all.
const items = [
{ id: 'dashboard', module: 'dashboard', perm: 'dashboard.view', label: 'Prehľad', ico:
},
{ id: 'orders', module: 'orders', perm: 'orders.view', label: 'Objednávky', ico:
},
{ id: 'products', module: 'products', perm: 'products.view', label: 'Produkty', ico:
},
{ id: 'customers', module: 'users_customers', perm: 'users_customers.view', label: 'Zákazníci', ico:
},
{ id: 'pricing', module: 'pricing', perm: 'pricing.view', label: 'Individ. ceny', ico:
},
{ id: 'b2b', module: 'b2b', perm: 'b2b.view', label: 'B2B schvaľ.', ico:
},
{ id: 'datasheets',module: 'datasheets', perm: 'datasheets.view', label: 'Datasheety', ico:
},
{ id: 'gallery', module: 'gallery', perm: 'gallery.view', label: 'Realizácie', ico:
},
{ id: 'ai', module: 'ai', perm: 'ai.view', label: 'AI asistent', ico:
},
{ id: 'calendar', module: 'calendar', perm: 'calendar.view', label: 'Kalendár & dovolenky', ico:
},
{ id: 'pickup', module: 'calendar', perm: 'calendar.view', label: 'Osobný odber', ico:
},
{ id: 'forms', module: 'forms', perm: 'forms.view', label: 'Formuláre', ico:
},
];
const admin = [
{ id: 'users', module: 'users', perm: 'users.view', label: 'ERP Používatelia', ico:
},
{ id: 'modules', module: 'modules', perm: 'modules.view', label: 'Moduly', ico:
},
{ id: 'integrations', module: 'integrations', perm: 'integrations.view', label: 'Integrácie', ico:
},
// Terminál — viditeľný IBA pre role 'system' (sysadmin). Wildcard '*' v admin role to neobíde.
{ id: 'terminal', module: 'terminal', perm: null, roleRequire: 'system', label: 'Terminál', ico:
},
{ id: 'settings', module: 'settings', perm: null, label: 'Nastavenia', ico:
}, // always visible for logged-in users
];
const sess = window.currentSession || {};
const modulesEnabled = sess.modules
? Object.fromEntries(sess.modules.map(m => [m.slug, !!m.is_enabled]))
: null;
const isEnabled = (slug) => modulesEnabled == null ? true : modulesEnabled[slug] !== false;
const perms = sess.permissions || null;
const hasPerm = (key) => {
if (!perms) return true; // before session loads, show everything
if (perms['*'] === true) return true; // admin wildcard
if (!key) return true; // sidebar item with no perm requirement
return perms[key] === true;
};
// Stricter check: ak je `roleRequire` nastavené, treba presnú zhodu role (ignoruje wildcard).
const currentRole = sess.user?.role;
const passRoleGate = (it) => !it.roleRequire || currentRole === it.roleRequire;
const visibleItems = items.filter(it => isEnabled(it.module) && hasPerm(it.perm) && passRoleGate(it));
const visibleAdmin = admin.filter(it => isEnabled(it.module) && hasPerm(it.perm) && passRoleGate(it));
return (
{(window.currentBranding && window.currentBranding.app_name) || 'D&D Energy'}ERP
);
}
// ───── Page wrapper ─────
function AppShell({ active, crumbs, children }) {
return (
);
}
// ───── Mock data ─────
const orders = [
{ id: '#DD-2841', date: '23.04.2026', customer: 'Peter Novotný', email: 'p.novotny@sunhome.sk', total: '4 782,00 €', status: 'new', items: 3 },
{ id: '#DD-2840', date: '23.04.2026', customer: 'SolarTech s.r.o.', email: 'objednavky@solartech.sk', total: '12 450,00 €', status: 'paid', items: 8 },
{ id: '#DD-2839', date: '22.04.2026', customer: 'Martina Hrušková', email: 'hruskova@gmail.com', total: '1 240,00 €', status: 'processing', items: 2 },
{ id: '#DD-2838', date: '22.04.2026', customer: 'Energomont a.s.', email: 'nakup@energomont.sk', total: '28 990,00 €', status: 'shipped', items: 14 },
{ id: '#DD-2837', date: '22.04.2026', customer: 'Jozef Varga', email: 'j.varga@zoznam.sk', total: '890,00 €', status: 'paid', items: 1 },
{ id: '#DD-2836', date: '21.04.2026', customer: 'EkoDom k.s.', email: 'info@ekodom.sk', total: '6 310,00 €', status: 'completed', items: 5 },
{ id: '#DD-2835', date: '21.04.2026', customer: 'Lukáš Mikuláš', email: 'lmikulas@me.com', total: '2 190,00 €', status: 'cancelled',items: 2 },
{ id: '#DD-2834', date: '21.04.2026', customer: 'GreenGrid s.r.o.', email: 'orders@greengrid.eu', total: '18 720,00 €', status: 'processing',items: 11 },
{ id: '#DD-2833', date: '20.04.2026', customer: 'Andrea Štefanová', email: 'stefanova@azet.sk', total: '3 450,00 €', status: 'paid', items: 4 },
{ id: '#DD-2832', date: '20.04.2026', customer: 'Slovakia Solar', email: 'dispecing@slovsolar.sk', total: '9 980,00 €', status: 'shipped', items: 7 },
];
const statusMap = {
new: { label: 'Nová', cls: 'amber' },
paid: { label: 'Zaplatená', cls: 'navy' },
processing: { label: 'Spracúva sa',cls: 'gray' },
shipped: { label: 'Odoslaná', cls: 'green' },
completed: { label: 'Dokončená', cls: 'green' },
cancelled: { label: 'Zrušená', cls: 'red' },
};
const products = [
{ sku: 'PV-ECO-5', name: 'Fotovoltická zostava ECO 5kW', cat: 'Zostavy', price: '4 980,00', stock: 14, var: 3, img: 'panel' },
{ sku: 'PV-PRE-8', name: 'Fotovoltická zostava PREMIUM 8kW', cat: 'Zostavy', price: '7 290,00', stock: 8, var: 4, img: 'panel' },
{ sku: 'PV-PRE-10', name: 'Fotovoltická zostava PREMIUM 10kW', cat: 'Zostavy', price: '9 150,00', stock: 5, var: 4, img: 'panel' },
{ sku: 'INV-GW-5K', name: 'Menič GoodWe GW5K-ET', cat: 'Meniče', price: '1 240,00', stock: 22, var: 1, img: 'inverter' },
{ sku: 'INV-SOL-8K', name: 'Menič Solax X3-Hybrid 8kW', cat: 'Meniče', price: '1 890,00', stock: 11, var: 2, img: 'inverter' },
{ sku: 'BAT-PYLON-5', name: 'Batéria Pylontech US5000 4.8kWh', cat: 'Batérie', price: '1 560,00', stock: 18, var: 1, img: 'battery' },
{ sku: 'BAT-BYD-10', name: 'Batéria BYD Battery-Box HVS 10.2', cat: 'Batérie', price: '3 890,00', stock: 4, var: 1, img: 'battery' },
{ sku: 'PAN-TRINA', name: 'Panel Trina Solar Vertex 450Wp', cat: 'Panely', price: '89,00', stock: 312,var: 1, img: 'panel' },
{ sku: 'PAN-JINKO', name: 'Panel Jinko Tiger Pro 425Wp', cat: 'Panely', price: '79,00', stock: 180,var: 1, img: 'panel' },
];
// ───── Typing / thinking indicator ─────
// Animated dots + optional elapsed-time counter. Used by every AI chat surface.
// Typing indicator with optional rotating "steps" — when steps[] is passed,
// each step shows for `rotateMs` (default 2800ms) and the previous one shows
// as ✓ done. Final step sticks. Without steps, falls back to label + dots.
function TypingIndicator({ label, startedAt, variant = 'bubble', steps = null, rotateMs = 2800 }) {
const [now, setNow] = React.useState(() => Date.now());
const [stepIdx, setStepIdx] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setNow(Date.now()), 250);
return () => clearInterval(id);
}, []);
React.useEffect(() => {
if (!steps || !steps.length) return;
const t = setInterval(() => setStepIdx(i => Math.min(i + 1, steps.length - 1)), rotateMs);
return () => clearInterval(t);
}, [steps, rotateMs]);
const secs = startedAt ? (now - startedAt) / 1000 : 0;
// No steps → original compact bubble
if (!steps || !steps.length) {
return (
{label &&
{label}
}
{secs.toFixed(1)} s }
);
}
// With steps → progress checklist (matches the wizard ProgressLog style)
return (
{label && {label} }
{secs.toFixed(1)} s
{steps.map((s, i) => {
const done = i < stepIdx;
const active = i === stepIdx;
return (
{done ? '✓' : (active ? ⟳ : '○')}
{s}
);
})}
);
}
// Heuristically pick a steps[] script based on the user's last message —
// covers the most common slow tool flows so the user sees real progress.
function pickTypingSteps(lastUserText) {
const t = String(lastUserText || '').toLowerCase();
// Product creation (woo_create_product tool)
if (/(pridaj|vytvor|nahraj|uveď|zaeviduj).*(produkt|panel|menič|striedač|batéri)/i.test(lastUserText || '') ||
/datasheet|datasheety/i.test(t)) {
return [
'📄 Čítam datasheet (ak je priložený)',
'🏷️ Identifikujem značku a typový kód',
'⚡ Extrahujem technické parametre',
'📝 Generujem názov a krátky popis',
'🎯 Skladám SEO titulok a meta description',
'📄 Píšem dlhý popis s dde-* template',
'🔧 Pridávam atribúty (taxonomy + custom)',
'💾 Posielam do WooCommerce',
];
}
// Lookups / search
if (/(nájdi|hľadaj|zobraz|aké|kolko|koľko|kto má|stav|prehľad)/i.test(t)) {
return [
'🔍 Analyzujem otázku',
'🔧 Volám nástroje',
'📊 Spracovávam dáta',
'✏️ Skladám odpoveď',
];
}
// Generic fallback — still better than just "pracuje…"
return [
'🤔 Premýšľam o tvojej požiadavke',
'🔧 Volám potrebné nástroje',
'✏️ Skladám odpoveď',
];
}
Object.assign(window, { Ico, Logo, BrandBadge, Sparkline, Topbar, Sidebar, AppShell, TypingIndicator, pickTypingSteps, orders, statusMap, products });