Refactor dashboard sections: KPI cards, filters, fallbacks
- Replace 4 static KPI cards with 5 interactive cards - 'Otvoreni nalozi' and 'Servisi danas' are now clickable links - Added context-aware subtotals (u kontekstu) when crane context is set - Replaced 'Upozorenja' (mileage-based, irrelevant for cranes) with 'Bez putnog naloga' - 'Dovrseni nalozi' now shows completion percentage - Added new card 'Moji zadaci danas' (tasks assigned to current user, today) - Added crane context filter toggle on the tasks table (Sve dizalice / Odabrani kontekst) - Service records page now shows last 10 records as fallback when no crane context is selected - Moved SyncLogPanel into a collapsible <details> element - Removed dead code: PAGE_MODE_TO_SECTION, activeSection/setActiveSection state, navbar:navigate event handler, and DashboardTopbar nav tab block (showSectionNav was always false; navigation is handled by Navbar.jsx) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
mariomitte
@@ -1,32 +1,18 @@
|
||||
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>
|
||||
<h2 className="text-xl font-semibold text-text-main">ERP</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{pendingSyncCount > 0 && (
|
||||
@@ -53,31 +39,6 @@ export default function DashboardTopbar({
|
||||
|
||||
{/* ── 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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -136,17 +136,7 @@ function SortableCodeLabel({ title, direction, onToggle }) {
|
||||
);
|
||||
}
|
||||
|
||||
const PAGE_MODE_TO_SECTION = {
|
||||
dashboard: 'dashboard',
|
||||
'work-orders': 'work-orders',
|
||||
'service-records': 'service-records',
|
||||
vehicles: 'cranes',
|
||||
clients: 'clients',
|
||||
};
|
||||
|
||||
export default function FleetDashboardShell({ initialSection = 'dashboard', pageMode = 'dashboard' }) {
|
||||
const resolvedInitialSection = initialSection || PAGE_MODE_TO_SECTION[pageMode] || 'dashboard';
|
||||
const [activeSection, setActiveSection] = useState(resolvedInitialSection);
|
||||
export default function FleetDashboardShell({ pageMode = 'dashboard' }) {
|
||||
const [isWorkOrderModalOpen, setIsWorkOrderModalOpen] = useState(false);
|
||||
const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
|
||||
const [selectedWorkOrder, setSelectedWorkOrder] = useState(null);
|
||||
@@ -185,6 +175,7 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
|
||||
const [selectedCraneRowId, setSelectedCraneRowId] = useState(null);
|
||||
const [expandedServiceTaskId, setExpandedServiceTaskId] = useState(null);
|
||||
const [hasMounted, setHasMounted] = useState(false);
|
||||
const [taskCraneFilter, setTaskCraneFilter] = useState('all');
|
||||
|
||||
useEffect(() => {
|
||||
setHasMounted(true);
|
||||
@@ -270,26 +261,9 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
|
||||
};
|
||||
}, [authReady]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleNavbarNavigate(event) {
|
||||
const section = event?.detail;
|
||||
if (typeof section === 'string' && section.length > 0) {
|
||||
setActiveSection(section);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('navbar:navigate', handleNavbarNavigate);
|
||||
return () => window.removeEventListener('navbar:navigate', handleNavbarNavigate);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function handleNotificationOpenEntity(event) {
|
||||
const detail = event?.detail || {};
|
||||
const section = detail.section;
|
||||
if (typeof section === 'string' && section.length > 0) {
|
||||
setActiveSection(section);
|
||||
}
|
||||
|
||||
if (detail.entityType === 'work_order' && detail.entityId) {
|
||||
if (detail.vehicleId) {
|
||||
const targetCrane = cranes.find((item) => String(item.id) === String(detail.craneId || detail.vehicleId));
|
||||
@@ -352,6 +326,43 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
|
||||
if (serial) return `SN ${serial}`;
|
||||
return hydratedContextCrane.registration_number || '-';
|
||||
}, [hydratedContextCrane]);
|
||||
// KPI: context-aware counts (null kad kontekst nije postavljen)
|
||||
const contextStats = useMemo(() => {
|
||||
if (!hydratedSelectedVehicleId) return null;
|
||||
const ctxWoIds = new Set(
|
||||
tasks
|
||||
.filter((t) => String(t.vehicle || '') === String(hydratedSelectedVehicleId) && t.work_order)
|
||||
.map((t) => String(t.work_order))
|
||||
);
|
||||
const ctxWorkOrders = workOrders.filter(
|
||||
(o) => String(o.vehicle) === String(hydratedSelectedVehicleId) || ctxWoIds.has(String(o.id))
|
||||
);
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
return {
|
||||
openWorkOrders: ctxWorkOrders.filter((o) => o.status !== 'closed').length,
|
||||
servicesToday: tasks.filter(
|
||||
(t) => String(t.vehicle || '') === String(hydratedSelectedVehicleId)
|
||||
&& t.scheduled_date === today
|
||||
&& (t.status === 'aktivan' || t.status === 'servis')
|
||||
).length,
|
||||
};
|
||||
}, [tasks, workOrders, hydratedSelectedVehicleId]);
|
||||
// KPI: moji zadaci planirani danas
|
||||
const myTasksToday = useMemo(() => {
|
||||
if (!user?.id || !hasMounted) return 0;
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
return tasks.filter(
|
||||
(t) => String(t.assigned_to || '') === String(user.id)
|
||||
&& t.scheduled_date === today
|
||||
&& isTaskActive(t)
|
||||
).length;
|
||||
}, [tasks, user?.id, hasMounted]);
|
||||
// Zadnji servisni zapisi za fallback prikaz (kad kontekst nije postavljen)
|
||||
const recentServiceRecords = useMemo(() => (
|
||||
[...serviceRecords]
|
||||
.sort((a, b) => String(b.service_date || '').localeCompare(String(a.service_date || '')))
|
||||
.slice(0, 10)
|
||||
), [serviceRecords]);
|
||||
const serviceRecordsForContext = useMemo(() => {
|
||||
if (!selectedVehicleId) return [];
|
||||
return [...serviceRecords]
|
||||
@@ -550,14 +561,23 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
|
||||
return filteredByServicer;
|
||||
})();
|
||||
|
||||
return [...filteredByStatus].sort((left, right) => (
|
||||
const filteredByCrane = (() => {
|
||||
if (taskCraneFilter !== 'context' || !hydratedSelectedVehicleId) {
|
||||
return filteredByStatus;
|
||||
}
|
||||
return filteredByStatus.filter(
|
||||
(task) => String(task.vehicle || '') === String(hydratedSelectedVehicleId)
|
||||
);
|
||||
})();
|
||||
|
||||
return [...filteredByCrane].sort((left, right) => (
|
||||
compareWorkOrderCodesByDate(
|
||||
left?.work_order_label || '',
|
||||
right?.work_order_label || '',
|
||||
taskWorkOrderSortDirection
|
||||
)
|
||||
));
|
||||
}, [tasks, taskFilter, canViewAllTasks, canToggleTaskScope, taskScope, user?.id, isSupervisorNotServiser, selectedServicerId, taskWorkOrderSortDirection]);
|
||||
}, [tasks, taskFilter, canViewAllTasks, canToggleTaskScope, taskScope, user?.id, isSupervisorNotServiser, selectedServicerId, taskWorkOrderSortDirection, taskCraneFilter, hydratedSelectedVehicleId]);
|
||||
const selectedTaskServiceRecords = useMemo(() => {
|
||||
if (!selectedTask?.id) return [];
|
||||
return [...serviceRecords]
|
||||
@@ -734,9 +754,6 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
|
||||
<AnimatedPage className="min-h-screen">
|
||||
<main className="min-w-0">
|
||||
<DashboardTopbar
|
||||
activeSection={activeSection}
|
||||
onSectionChange={setActiveSection}
|
||||
showSectionNav={false}
|
||||
onOpenWorkOrderModal={async () => {
|
||||
try {
|
||||
const availableCranes = await ensureVehiclesCatalog();
|
||||
@@ -769,30 +786,92 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
|
||||
)}
|
||||
|
||||
{isDashboardPage && (
|
||||
<div id="section-dashboard" className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
<article className="rounded-xl border border-border-hairline bg-canvas-elevated p-4 shadow-sm">
|
||||
<p className="text-sm text-text-muted">Otvoreni nalozi</p>
|
||||
<div id="section-dashboard" className="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
|
||||
{/* Otvoreni nalozi — klik vodi na /putni-nalozi */}
|
||||
<a
|
||||
href="/putni-nalozi"
|
||||
className="group rounded-xl border border-border-hairline bg-canvas-elevated p-4 shadow-sm transition-all hover:border-indigo-300 hover:bg-indigo-50/60 hover:shadow-md"
|
||||
>
|
||||
<p className="text-sm text-text-muted group-hover:text-indigo-700">Otvoreni nalozi</p>
|
||||
<p className="mt-2 text-2xl font-semibold text-text-main">{stats.openWorkOrders}</p>
|
||||
</article>
|
||||
<article className="rounded-xl border border-border-hairline bg-canvas-elevated p-4 shadow-sm">
|
||||
<p className="text-sm text-text-muted">Servisi danas</p>
|
||||
{hydratedSelectedVehicleId && contextStats !== null && (
|
||||
<p className="mt-1 text-xs text-indigo-600">{contextStats.openWorkOrders} u kontekstu</p>
|
||||
)}
|
||||
</a>
|
||||
|
||||
{/* Servisi danas — klik vodi na /servisni-zapisi */}
|
||||
<a
|
||||
href="/servisni-zapisi"
|
||||
className="group rounded-xl border border-border-hairline bg-canvas-elevated p-4 shadow-sm transition-all hover:border-indigo-300 hover:bg-indigo-50/60 hover:shadow-md"
|
||||
>
|
||||
<p className="text-sm text-text-muted group-hover:text-indigo-700">Servisi danas</p>
|
||||
<p className="mt-2 text-2xl font-semibold text-text-main">{stats.servicesToday}</p>
|
||||
</article>
|
||||
{hydratedSelectedVehicleId && contextStats !== null && (
|
||||
<p className="mt-1 text-xs text-indigo-600">{contextStats.servicesToday} u kontekstu</p>
|
||||
)}
|
||||
</a>
|
||||
|
||||
{/* Aktivni zadaci bez putnog naloga */}
|
||||
<article className="rounded-xl border border-border-hairline bg-canvas-elevated p-4 shadow-sm">
|
||||
<p className="text-sm text-text-muted">Upozorenja</p>
|
||||
<p className="mt-2 text-2xl font-semibold text-amber-600">{stats.warnings}</p>
|
||||
<p className="text-sm text-text-muted">Bez putnog naloga</p>
|
||||
<p className={`mt-2 text-2xl font-semibold ${stats.tasksWithoutWorkOrder > 0 ? 'text-amber-600' : 'text-text-main'}`}>
|
||||
{stats.tasksWithoutWorkOrder}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-text-muted">aktivnih zadataka</p>
|
||||
</article>
|
||||
|
||||
{/* Dovršeni nalozi s postotkom */}
|
||||
<article className="rounded-xl border border-border-hairline bg-canvas-elevated p-4 shadow-sm">
|
||||
<p className="text-sm text-text-muted">Dovršeni nalozi</p>
|
||||
<p className="mt-2 text-2xl font-semibold text-emerald-600">{stats.closedWorkOrders}</p>
|
||||
{stats.totalWorkOrders > 0 && (
|
||||
<p className="mt-1 text-xs text-text-muted">
|
||||
{Math.round((stats.closedWorkOrders / stats.totalWorkOrders) * 100)}% od ukupno {stats.totalWorkOrders}
|
||||
</p>
|
||||
)}
|
||||
</article>
|
||||
|
||||
{/* Moji zadaci danas */}
|
||||
<article className="rounded-xl border border-border-hairline bg-canvas-elevated p-4 shadow-sm">
|
||||
<p className="text-sm text-text-muted">Moji zadaci danas</p>
|
||||
<p className={`mt-2 text-2xl font-semibold ${myTasksToday > 0 ? 'text-indigo-600' : 'text-text-main'}`}>
|
||||
{hasMounted ? myTasksToday : '—'}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-text-muted">planirani na mene</p>
|
||||
</article>
|
||||
</div>
|
||||
)}
|
||||
{isDashboardPage && (
|
||||
<article className="overflow-hidden rounded-xl border border-border-hairline bg-canvas-elevated shadow-sm">
|
||||
<div className="flex items-center justify-between border-b border-border-hairline px-4 py-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-b border-border-hairline px-4 py-3">
|
||||
<h3 className="font-semibold text-text-main">Radni zadaci</h3>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs">
|
||||
{/* Crane context filter */}
|
||||
{hasMounted && hydratedSelectedVehicleId && (
|
||||
<>
|
||||
<span className="text-text-muted">|</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTaskCraneFilter('all')}
|
||||
className={taskCraneFilter === 'all'
|
||||
? 'rounded-md bg-emerald-50 px-2.5 py-1 font-semibold text-emerald-700'
|
||||
: 'rounded-md px-2.5 py-1 text-text-main hover:bg-canvas-deep'}
|
||||
>
|
||||
Sve dizalice
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTaskCraneFilter('context')}
|
||||
className={taskCraneFilter === 'context'
|
||||
? 'rounded-md bg-emerald-50 px-2.5 py-1 font-semibold text-emerald-700'
|
||||
: 'rounded-md px-2.5 py-1 text-text-main hover:bg-canvas-deep'}
|
||||
title={contextCraneLabel ?? undefined}
|
||||
>
|
||||
Odabrani kontekst
|
||||
</button>
|
||||
<span className="text-text-muted">|</span>
|
||||
</>
|
||||
)}
|
||||
{hasMounted && isSupervisorNotServiser && (
|
||||
<label className="flex items-center gap-2 text-text-main">
|
||||
<span>Serviser</span>
|
||||
@@ -917,9 +996,15 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
|
||||
</article>
|
||||
)}
|
||||
{isDashboardPage && (
|
||||
<div>
|
||||
<SyncLogPanel />
|
||||
</div>
|
||||
<details className="overflow-hidden rounded-xl border border-border-hairline bg-canvas-elevated shadow-sm">
|
||||
<summary className="flex cursor-pointer select-none items-center justify-between px-4 py-3 text-sm font-medium text-text-muted hover:bg-canvas-deep">
|
||||
<span>Sync log</span>
|
||||
<span className="text-xs opacity-60">▼</span>
|
||||
</summary>
|
||||
<div className="border-t border-border-hairline">
|
||||
<SyncLogPanel />
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
|
||||
{showWorkOrders && (
|
||||
@@ -1131,9 +1216,50 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
|
||||
</div>
|
||||
</div>
|
||||
{!hydratedSelectedVehicleId && (
|
||||
<p className="px-4 py-6 text-center text-sm text-text-muted">
|
||||
Odaberite dizalicu za prikaz servisnih zapisa.
|
||||
</p>
|
||||
<div>
|
||||
<p className="border-b border-border-hairline px-4 py-3 text-xs text-text-muted">
|
||||
Odaberite dizalicu u servisnom kontekstu za prikaz zapisa po radnim zadacima.
|
||||
Ispod su prikazani zadnji servisni zapisi.
|
||||
</p>
|
||||
{recentServiceRecords.length === 0 ? (
|
||||
<p className="px-4 py-6 text-center text-sm text-text-muted">Nema servisnih zapisa.</p>
|
||||
) : (
|
||||
<AnimatedDataTable
|
||||
columns={[
|
||||
{ key: 'date', label: 'Datum', className: 'px-4 py-3' },
|
||||
{ key: 'crane', label: 'Dizalica', className: 'px-4 py-3' },
|
||||
{ key: 'description', label: 'Opis', className: 'px-4 py-3' },
|
||||
{ key: 'cost', label: 'Trošak', className: 'px-4 py-3' },
|
||||
{ key: 'actions', label: 'Akcije', className: 'px-4 py-3' },
|
||||
]}
|
||||
rows={recentServiceRecords}
|
||||
rowKey={(r) => r.id}
|
||||
rowClassName="hover:bg-canvas-deep"
|
||||
renderRow={(record) => (
|
||||
<>
|
||||
<td className="px-4 py-3">{formatDate(record.service_date)}</td>
|
||||
<td className="px-4 py-3">{formatServiceRecordCraneLabel(record, cranes)}</td>
|
||||
<td className="max-w-xs truncate px-4 py-3" title={record.description || ''}>
|
||||
{record.description || '-'}
|
||||
</td>
|
||||
<td className="px-4 py-3">{formatCost(record.cost)}</td>
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setServiceRecordBackTask(null);
|
||||
setSelectedServiceRecord(record);
|
||||
}}
|
||||
className="rounded border border-border-hairline px-2 py-1 text-xs text-text-main hover:bg-canvas-base"
|
||||
>
|
||||
Detalji
|
||||
</button>
|
||||
</td>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{hydratedSelectedVehicleId && loading && (
|
||||
<p className="px-4 py-6 text-center text-sm text-text-muted">
|
||||
|
||||
@@ -464,16 +464,19 @@ export const $dashboardStats = computed(
|
||||
const servicesToday = tasks.filter(
|
||||
(t) => t.scheduled_date === today && (t.status === 'aktivan' || t.status === 'servis')
|
||||
).length;
|
||||
const warnings = serviceRecords.filter((record) => {
|
||||
if (record.next_service_due_at == null || record.mileage == null) return false;
|
||||
return Number(record.next_service_due_at) - Number(record.mileage) <= 1000;
|
||||
}).length;
|
||||
const totalWorkOrders = workOrders.length;
|
||||
// Aktivni taskovi bez dodijeljenog putnog naloga
|
||||
const tasksWithoutWorkOrder = tasks.filter(
|
||||
(t) => (t.status === 'aktivan' || t.status === 'servis' || t.status === 'spreman_za_zavrsetak')
|
||||
&& !t.work_order
|
||||
).length;
|
||||
|
||||
return {
|
||||
openWorkOrders,
|
||||
closedWorkOrders,
|
||||
totalWorkOrders,
|
||||
servicesToday,
|
||||
warnings,
|
||||
tasksWithoutWorkOrder,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user