84 lines
3.9 KiB
JavaScript
84 lines
3.9 KiB
JavaScript
import { showToast } from '../../stores/toastStore';
|
|
import ServiceContextSelector from './ServiceContextSelector';
|
|
|
|
const NAV_ITEMS = [
|
|
{ key: 'dashboard', label: 'Dashboard' },
|
|
{ key: 'work-orders', label: 'Putni nalozi' },
|
|
{ key: 'service-records', label: 'Servisni zapisi' },
|
|
{ key: 'cranes', label: 'Dizalice' },
|
|
{ key: 'clients', label: 'Klijenti' },
|
|
];
|
|
|
|
export default function DashboardTopbar({
|
|
activeSection,
|
|
onSectionChange,
|
|
onOpenWorkOrderModal,
|
|
onOpenTaskModal,
|
|
pendingSyncCount,
|
|
onNewServiceRecord,
|
|
showSectionNav = true,
|
|
}) {
|
|
const sectionTitle = NAV_ITEMS.find((item) => item.key === activeSection)?.label || 'Dashboard';
|
|
|
|
return (
|
|
<header className="sticky top-0 z-20 border-b border-border-hairline bg-canvas-elevated/95 backdrop-blur">
|
|
{/* ── Gornji red ───────────────────────────────────────── */}
|
|
<div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-wide text-text-muted">Pregled sustava</p>
|
|
<h2 className="text-xl font-semibold text-text-main">{sectionTitle}</h2>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
{pendingSyncCount > 0 && (
|
|
<span className="rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-700">
|
|
Offline queue: {pendingSyncCount}
|
|
</span>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={onOpenWorkOrderModal}
|
|
className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-sm font-medium text-text-main hover:bg-canvas-deep"
|
|
>
|
|
+ Novi putni nalog
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onOpenTaskModal}
|
|
className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-sm font-medium text-text-main hover:bg-canvas-deep"
|
|
>
|
|
+ Novi radni zadatak
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Selector bar: Kupac + Dizalica ───────────────────── */}
|
|
<ServiceContextSelector onNewServiceRecord={onNewServiceRecord} />
|
|
|
|
{/* ── Navigacijski tabovi ──────────────────────────────── */}
|
|
{showSectionNav && (
|
|
<nav className="overflow-x-auto border-t border-border-hairline px-4 sm:px-6">
|
|
<ul className="flex min-w-max items-center gap-1 py-2 text-sm">
|
|
{NAV_ITEMS.map((item) => (
|
|
<li key={item.key}>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
onSectionChange(item.key);
|
|
}}
|
|
className={
|
|
activeSection === item.key
|
|
? 'rounded-lg bg-indigo-50 px-3 py-2 font-medium text-indigo-700'
|
|
: 'rounded-lg px-3 py-2 text-text-main hover:bg-canvas-deep'
|
|
}
|
|
>
|
|
{item.label}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|