{ticks.map((t) => {fmt(t)})}
{data.map((d, i) => (
{keys.map((k, ki) => (
1 ? `${56 / keys.length}%` : '58%',
maxWidth: 34,
height: `${(d[k] / max) * 100}%`,
background: colors[ki], borderRadius: '7px 7px 4px 4px',
transition: 'height .5s cubic-bezier(.2,.8,.3,1)',
}} />
))}
{d.m || d.label}
))}
);
}
/* ---------- Sidebar ---------- */
const NAV = [
{ id: 'dashboard', label: 'Dashboard', icon: Icons.dash, group: 'Overview', perm: 'dashboard' },
{ id: 'crm', label: 'Customer CRM', icon: Icons.crm, group: 'Operations', perm: 'customers' },
{ id: 'sales', label: 'Sales', icon: Icons.sales, group: 'Operations', perm: 'sales' },
{ id: 'rentals', label: 'Rentals', icon: Icons.rental, group: 'Operations', perm: 'rentals' },
{ id: 'workshop', label: 'Workshop', icon: Icons.wrench, group: 'Operations', perm: 'workshop', badge: '4' },
{ id: 'inventory', label: 'Inventory', icon: Icons.box, group: 'Operations', perm: 'inventory' },
{ id: 'payments', label: 'Payments', icon: Icons.pay, group: 'Finance', perm: 'payments' },
{ id: 'reports', label: 'Reports', icon: Icons.chart, group: 'Finance', perm: 'reports' },
{ id: 'notifications', label: 'Notifications', icon: Icons.bell, group: 'System', perm: 'settings' },
];
function Sidebar({ route, go }) {
const D = window.DATA;
const visible = NAV.filter(n => !n.perm || window.can(n.perm, 'view'));
const groups = [...new Set(visible.map((n) => n.group))];
return (
);
}
/* ---------- Topbar ---------- */
function Topbar({ route, go, branch, setBranch, currentUser }) {
const [openBranch, setOpenBranch] = useState(false);
const [openUser, setOpenUser] = useState(false);
const [branches, setBranches] = useState([]);
const branchRef = useRef(null);
const userRef = useRef(null);
// Load real branches from API once
useEffect(() => {
api.getBranches()
.then(r => setBranches(Array.isArray(r) ? r : (r.branches || [])))
.catch(() => {});
}, []);
// Close dropdowns on outside click
useEffect(() => {
const handler = (e) => {
if (branchRef.current && !branchRef.current.contains(e.target)) setOpenBranch(false);
if (userRef.current && !userRef.current.contains(e.target)) setOpenUser(false);
};
document.addEventListener('mousedown', handler);
return () => document.removeEventListener('mousedown', handler);
}, []);
// Resolve logged-in user: prop → localStorage → static fallback
const u = currentUser || (() => {
try { return JSON.parse(localStorage.getItem('currentUser') || 'null'); } catch { return null; }
})() || window.DATA.company.user;
const initials = u.init || (u.name || 'U').split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
const displayRole = u.display_role || u.role || '';
// Only true super-admins/admins may switch branches; everyone else is locked
// to their own branch (role-based — never trust a missing permissions field).
const canSwitchBranch = api.isSuperAdmin();
const title = (NAV.find((n) => n.id === route) || {}).label || { settings: 'Settings', help: 'Help & Support' }[route] || 'Dashboard';
const lockedBranchName = branches.find(b => String(b.id) === String(u.branch_id))?.name || u.branch_name || u.branch || 'Your branch';
const activeBranchLabel = !canSwitchBranch
? lockedBranchName
: (branch === 'All' ? 'All Branches' : (branches.find(b => String(b.id) === String(branch))?.name || branch));
return (
{title}
{new Date().toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
{}} placeholder="Search customers, invoices, serials…" w={300} />
{/* Branch selector — admins can switch, others are locked to their branch */}
{openBranch && canSwitchBranch && (
{[{ id: 'All', name: 'All Branches' }, ...branches].map((b) => (
))}
)}
{/* User menu */}
{openUser && (
{u.name}
{u.email}
{displayRole}
)}
);
}
/* ============================================================
Global Toast notification system
Call from anywhere: window.toast('Message', 'ok' | 'error' | 'warn')
============================================================ */
let _toastSetter = null;
window.toast = (msg, type = 'ok') => {
if (!_toastSetter) { console.warn('[toast]', type, msg); return; }
const id = Date.now() + Math.random();
_toastSetter(prev => [...prev, { id, msg, type }]);
setTimeout(() => _toastSetter(prev => prev.filter(t => t.id !== id)), 4200);
};
function ToastContainer() {
const [toasts, setToasts] = useState([]);
useEffect(() => {
_toastSetter = setToasts;
return () => { if (_toastSetter === setToasts) _toastSetter = null; };
}, []);
if (!toasts.length) return null;
return (
{toasts.map(t => {
const isErr = t.type === 'error', isWarn = t.type === 'warn';
const bg = isErr ? '#2a1215' : isWarn ? '#2a2110' : '#111f11';
const bdr = isErr ? '#6b1a22' : isWarn ? '#6b4f1a' : '#1e4d1a';
const icon = isErr ? '✕' : isWarn ? '⚠' : '✓';
const col = isErr ? 'var(--bad)' : isWarn ? 'var(--warn)' : 'var(--ok)';
return (
{icon}
{t.msg}
);
})}
);
}
Object.assign(window, {
React, useState, useEffect, useRef, useMemo,
Ic, Icons, cls, Badge, Avatar, Btn, Delta, StatCard, Modal,
SearchBox, Tabs, PageHead, BarChart, Sidebar, Topbar, NAV,
ToastContainer,
});