feat: dodaj mjesecni izvjestaj servisera i troskova u kalendar widget

- Dva nova Django API endpointa (GET /api/fleet/reports/monthly-servicer/ i
  /api/fleet/reports/monthly-costs/) koji generiraju DOCX u A4 landscape formatu
- TaskCalendarWidget prosiren s report panelom: dva gumba iznad kalendara
  (Izvjestaj servisera / Izvjestaj troskova) sirenjem drawer-a na 680 px
- Preview tablice s podacima iz postojeceg tasks/workOrders store-a
- downloadMonthlyServiserReport i downloadMonthlyCostsReport u store-u
- TaskCalendarPortal prosljeduje activeWorkOrders prop widgetu

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

backend/modules/fleet/serializers.py

@@ -38,7 +38,7 @@ class VehicleSerializer(serializers.ModelSerializer):
             'is_company_vehicle', 'client', 'client_name',
             'assigned_servicer', 'is_active',
         ]
-        read_only_fields = ['id', 'current_mileage', 'client_name']
+        read_only_fields = ['id', 'client_name']
 
     def get_client_name(self, obj):
         if obj.client_id:

backend/modules/fleet/urls.py

@@ -3,6 +3,7 @@ from django.urls import path
 from .views import (
     CraneViewSet, VehicleViewSet, WorkOrderViewSet, VehicleServiceRecordViewSet,
     WorkOrderInvoiceViewSet, ServiceContextNoteViewSet, VehicleNotificationViewSet, VehicleServicePhotoViewSet, VehicleServiceAttachmentViewSet, pusher_auth,
+    monthly_servicer_report_docx, monthly_costs_report_docx,
 )
 
 router = DefaultRouter()
@@ -20,4 +21,6 @@ urlpatterns = router.urls
 
 urlpatterns += [
     path('pusher-auth/', pusher_auth, name='pusher-auth'),
+    path('reports/monthly-servicer/', monthly_servicer_report_docx, name='monthly-servicer-report'),
+    path('reports/monthly-costs/', monthly_costs_report_docx, name='monthly-costs-report'),
 ]

backend/modules/fleet/views.py

@@ -2108,6 +2108,254 @@ def _dispatch_work_order_email_background(task_kwargs):
     return 'thread'
 
 
+_MONTH_NAMES_HR = [
+    'Siječanj', 'Veljača', 'Ožujak', 'Travanj', 'Svibanj', 'Lipanj',
+    'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac',
+]
+
+
+@api_view(['GET'])
+@permission_classes([permissions.IsAuthenticated])
+def monthly_servicer_report_docx(request):
+    """Download monthly servicer report as DOCX (landscape table)."""
+    from datetime import date as _dt_date
+    try:
+        year = int(request.query_params.get('year', _dt_date.today().year))
+        month = int(request.query_params.get('month', _dt_date.today().month))
+        if not (1 <= month <= 12):
+            raise ValueError()
+    except (ValueError, TypeError):
+        return Response({'detail': 'Nevažeći year/month parametar.'}, status=400)
+
+    try:
+        from modules.task_management.models import Task as _TaskModel
+    except ImportError:
+        return Response({'detail': 'Task model nije dostupan.'}, status=500)
+
+    tasks_qs = (
+        _TaskModel.objects
+        .filter(
+            assigned_to=request.user,
+            is_active=True,
+            scheduled_date__year=year,
+            scheduled_date__month=month,
+        )
+        .select_related('work_order', 'work_order__vehicle', 'work_order__vehicle__client')
+        .order_by('scheduled_date', 'created_at')
+    )
+
+    rows = []
+    for task in tasks_qs:
+        wo = task.work_order
+        datum = task.scheduled_date.strftime('%d.%m.%Y') if task.scheduled_date else '-'
+        opis_posla = task.title or '-'
+        br_dizalice = '-'
+        komitent = '-'
+        mjesto_rada = '-'
+        pocetak_rada = '-'
+        kraj_rada = '-'
+        redovan_rad = '-'
+        prekovremeni = '0'
+        radni_nalog = '-'
+
+        if wo:
+            vehicle = getattr(wo, 'vehicle', None)
+            if vehicle:
+                sn = str(getattr(vehicle, 'crane_serial_number', '') or '').strip()
+                br_dizalice = sn or '-'
+                client_obj = getattr(vehicle, 'client', None)
+                komitent = str(getattr(client_obj, 'name', '') or '').strip() or '-'
+            mjesto_rada = wo.location or '-'
+            ts = wo.travel_start_at
+            te = wo.travel_end_at
+            if ts:
+                pocetak_rada = timezone.localtime(ts).strftime('%H:%M')
+            if te:
+                kraj_rada = timezone.localtime(te).strftime('%H:%M')
+            if ts and te and te > ts:
+                delta_h = (te - ts).total_seconds() / 3600.0
+                reg = min(delta_h, 8.0)
+                ovt = max(0.0, delta_h - 8.0)
+                redovan_rad = f"{reg:.2f}".rstrip('0').rstrip('.')
+                prekovremeni = f"{ovt:.2f}".rstrip('0').rstrip('.') if ovt > 0 else '0'
+            radni_nalog = str(wo.display_code or '').strip() or '-'
+
+        rows.append([datum, opis_posla, br_dizalice, komitent, mjesto_rada,
+                     pocetak_rada, kraj_rada, redovan_rad, prekovremeni, radni_nalog])
+
+    from docx import Document as _DocxDoc
+    from docx.shared import Pt, Cm
+    from docx.enum.text import WD_ALIGN_PARAGRAPH
+    from docx.enum.section import WD_ORIENT
+
+    doc = _DocxDoc()
+    for section in doc.sections:
+        section.orientation = WD_ORIENT.LANDSCAPE
+        section.page_width = Cm(29.7)
+        section.page_height = Cm(21.0)
+        section.left_margin = Cm(1.5)
+        section.right_margin = Cm(1.5)
+        section.top_margin = Cm(1.5)
+        section.bottom_margin = Cm(1.5)
+
+    month_label = _MONTH_NAMES_HR[month - 1]
+    servicer_name = _user_display_name(request.user) or getattr(request.user, 'username', str(request.user))
+
+    p_title = doc.add_paragraph()
+    p_title.alignment = WD_ALIGN_PARAGRAPH.CENTER
+    r_title = p_title.add_run('MJESEČNI IZVJEŠTAJ SERVISERA')
+    r_title.bold = True
+    r_title.font.size = Pt(14)
+
+    p_sub = doc.add_paragraph()
+    p_sub.alignment = WD_ALIGN_PARAGRAPH.CENTER
+    r_sub = p_sub.add_run(f"{servicer_name}  —  {month_label} {year}")
+    r_sub.font.size = Pt(11)
+
+    headers = ['DATUM', 'OPIS POSLA', 'BR. DIZALICE', 'KOMITENT', 'MJESTO RADA',
+               'POČETAK RADA', 'KRAJ RADA', 'REDOVAN RAD (h)', 'PREKOVREMENI (h)', 'RADNI NALOG']
+    col_widths = [Cm(2.2), Cm(5.5), Cm(2.5), Cm(3.5), Cm(3.5),
+                  Cm(2.2), Cm(2.2), Cm(2.4), Cm(2.4), Cm(2.4)]
+
+    table = doc.add_table(rows=1 + len(rows), cols=len(headers))
+    table.style = 'Table Grid'
+
+    hdr_cells = table.rows[0].cells
+    for i, (hdr, w) in enumerate(zip(headers, col_widths)):
+        hdr_cells[i].width = w
+        hdr_cells[i].text = hdr
+        if hdr_cells[i].paragraphs[0].runs:
+            run_h = hdr_cells[i].paragraphs[0].runs[0]
+            run_h.bold = True
+            run_h.font.size = Pt(8)
+
+    for ri, row_data in enumerate(rows):
+        data_cells = table.rows[ri + 1].cells
+        for ci, (val, w) in enumerate(zip(row_data, col_widths)):
+            data_cells[ci].width = w
+            data_cells[ci].text = str(val)
+            if data_cells[ci].paragraphs[0].runs:
+                data_cells[ci].paragraphs[0].runs[0].font.size = Pt(8)
+
+    buf = BytesIO()
+    doc.save(buf)
+    buf.seek(0)
+
+    month_key = f"{year}-{month:02d}"
+    safe_name = re.sub(r'[^\w\-]', '_', servicer_name)
+    fname = f"{safe_name}.izvjestaj-servisera.{month_key}.docx"
+    resp = HttpResponse(
+        buf.read(),
+        content_type='application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    )
+    resp['Content-Disposition'] = f'attachment; filename="{fname}"'
+    return resp
+
+
+@api_view(['GET'])
+@permission_classes([permissions.IsAuthenticated])
+def monthly_costs_report_docx(request):
+    """Download monthly servicer costs (invoices) report as DOCX."""
+    from datetime import date as _dt_date
+    try:
+        year = int(request.query_params.get('year', _dt_date.today().year))
+        month = int(request.query_params.get('month', _dt_date.today().month))
+        if not (1 <= month <= 12):
+            raise ValueError()
+    except (ValueError, TypeError):
+        return Response({'detail': 'Nevažeći year/month parametar.'}, status=400)
+
+    invoices_qs = (
+        WorkOrderInvoice.objects
+        .filter(
+            work_order__work_order_tasks__assigned_to=request.user,
+            work_order__work_order_tasks__is_active=True,
+            datum__year=year,
+            datum__month=month,
+        )
+        .select_related('work_order')
+        .distinct()
+        .order_by('datum', 'naziv_racuna')
+    )
+
+    rows = []
+    for inv in invoices_qs:
+        wo = inv.work_order
+        rows.append([
+            inv.datum.strftime('%d.%m.%Y') if inv.datum else '-',
+            inv.naziv_racuna or '-',
+            inv.lokacija or '-',
+            inv.opis or '-',
+            str(getattr(wo, 'display_code', '') or '').strip() or '-',
+        ])
+
+    from docx import Document as _DocxDoc
+    from docx.shared import Pt, Cm
+    from docx.enum.text import WD_ALIGN_PARAGRAPH
+    from docx.enum.section import WD_ORIENT
+
+    doc = _DocxDoc()
+    for section in doc.sections:
+        section.orientation = WD_ORIENT.LANDSCAPE
+        section.page_width = Cm(29.7)
+        section.page_height = Cm(21.0)
+        section.left_margin = Cm(1.5)
+        section.right_margin = Cm(1.5)
+        section.top_margin = Cm(1.5)
+        section.bottom_margin = Cm(1.5)
+
+    month_label = _MONTH_NAMES_HR[month - 1]
+    servicer_name = _user_display_name(request.user) or getattr(request.user, 'username', str(request.user))
+
+    p_title = doc.add_paragraph()
+    p_title.alignment = WD_ALIGN_PARAGRAPH.CENTER
+    r_title = p_title.add_run('MJESEČNI IZVJEŠTAJ TROŠKOVA SERVISERA')
+    r_title.bold = True
+    r_title.font.size = Pt(14)
+
+    p_sub = doc.add_paragraph()
+    p_sub.alignment = WD_ALIGN_PARAGRAPH.CENTER
+    r_sub = p_sub.add_run(f"{servicer_name}  —  {month_label} {year}")
+    r_sub.font.size = Pt(11)
+
+    headers = ['DATUM', 'NAZIV RAČUNA', 'LOKACIJA', 'OPIS', 'RADNI NALOG']
+    col_widths = [Cm(2.5), Cm(6.0), Cm(4.0), Cm(8.0), Cm(3.0)]
+
+    table = doc.add_table(rows=1 + len(rows), cols=len(headers))
+    table.style = 'Table Grid'
+
+    hdr_cells = table.rows[0].cells
+    for i, (hdr, w) in enumerate(zip(headers, col_widths)):
+        hdr_cells[i].width = w
+        hdr_cells[i].text = hdr
+        if hdr_cells[i].paragraphs[0].runs:
+            run_h = hdr_cells[i].paragraphs[0].runs[0]
+            run_h.bold = True
+            run_h.font.size = Pt(9)
+
+    for ri, row_data in enumerate(rows):
+        data_cells = table.rows[ri + 1].cells
+        for ci, (val, w) in enumerate(zip(row_data, col_widths)):
+            data_cells[ci].width = w
+            data_cells[ci].text = str(val)
+            if data_cells[ci].paragraphs[0].runs:
+                data_cells[ci].paragraphs[0].runs[0].font.size = Pt(9)
+
+    buf = BytesIO()
+    doc.save(buf)
+    buf.seek(0)
+
+    month_key = f"{year}-{month:02d}"
+    safe_name = re.sub(r'[^\w\-]', '_', servicer_name)
+    fname = f"{safe_name}.troskovi-servisera.{month_key}.docx"
+    resp = HttpResponse(
+        buf.read(),
+        content_type='application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    )
+    resp['Content-Disposition'] = f'attachment; filename="{fname}"'
+    return resp
+
+
 @api_view(['POST'])
 @permission_classes([permissions.IsAuthenticated])
 def pusher_auth(request):

backend/modules/task_management/views.py

@@ -30,6 +30,9 @@ class TaskViewSet(viewsets.ModelViewSet):
         scheduled_date = self.request.query_params.get('scheduled_date')
         if scheduled_date:
             qs = qs.filter(scheduled_date=scheduled_date)
+        work_order_id = self.request.query_params.get('work_order')
+        if work_order_id:
+            qs = qs.filter(work_order_id=work_order_id)
         return qs
 
     def perform_create(self, serializer):

frontend/src/components/dashboard/TaskCalendarWidget.jsx

@@ -1,11 +1,12 @@
-import { useMemo, useState } from 'preact/hooks';
+import { useMemo, useState } from 'preact/hooks';
 import { getStatusLabel } from '../../stores/taskStore';
+import { downloadMonthlyServiserReport, downloadMonthlyCostsReport } from '../../stores/fleetDashboardStore';
 import LeftSlideDrawer from '../layout/LeftSlideDrawer';
 import { getTaskCraneKind, getTaskCraneOwner, getTaskCraneSerial } from '../../lib/taskCraneDisplay';
 
-const WEEKDAY_LABELS = ['Po', 'Ut', 'Sr', 'Če', 'Pe', 'Su', 'Ne'];
+const WEEKDAY_LABELS = ['Po', 'Ut', 'Sr', 'ÄŚe', 'Pe', 'Su', 'Ne'];
 const MONTH_NAMES = [
-    'Siječanj', 'Veljača', 'Ožujak', 'Travanj', 'Svibanj', 'Lipanj',
+    'SijeÄŤanj', 'VeljaÄŤa', 'OĹľujak', 'Travanj', 'Svibanj', 'Lipanj',
     'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac',
 ];
 function toIsoDateKey(dateStr) {
@@ -19,12 +20,25 @@ function formatDayLabel(year, month, day) {
     return `${String(day).padStart(2, '0')}.${String(month + 1).padStart(2, '0')}.${year}`;
 }
 
-export default function TaskCalendarWidget({ tasks = [], notes = [], onTaskClick }) {
+function formatTime(isoStr) {
+    if (!isoStr) return '-';
+    const d = new Date(isoStr);
+    if (Number.isNaN(d.getTime())) return '-';
+    return d.toLocaleTimeString('hr-HR', { hour: '2-digit', minute: '2-digit' });
+}
+
+const SERVICER_HEADERS = ['DATUM', 'OPIS POSLA', 'BR. DIZALICE', 'KOMITENT', 'MJESTO RADA', 'POÄŚETAK', 'KRAJ', 'REDOVAN (h)', 'PREKOVR. (h)', 'RADNI NALOG'];
+
+export default function TaskCalendarWidget({ tasks = [], notes = [], workOrders = [], onTaskClick }) {
     const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
     const [viewMonth, setViewMonth] = useState(() => new Date().getMonth());
     const [selectedDay, setSelectedDay] = useState(null);
+    const [reportType, setReportType] = useState(null); // 'servicer' | 'costs' | null
+    const [downloading, setDownloading] = useState(false);
+
+    const reportOpen = reportType !== null;
+    const panelWidth = reportOpen ? 680 : 300;
 
-    // Map: "YYYY-MM-DD" -> task[]
     const tasksByDate = useMemo(() => {
         const map = {};
         for (const task of tasks) {
@@ -47,11 +61,10 @@ export default function TaskCalendarWidget({ tasks = [], notes = [], onTaskClick
         return map;
     }, [notes]);
 
-    // Calendar grid cells for current month
     const calendarDays = useMemo(() => {
         const firstDay = new Date(viewYear, viewMonth, 1);
-        let startDow = firstDay.getDay(); // 0=Sun
-        startDow = (startDow + 6) % 7; // shift to Mon=0
+        let startDow = firstDay.getDay();
+        startDow = (startDow + 6) % 7;
         const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
         const cells = [];
         for (let i = 0; i < startDow; i++) cells.push(null);
@@ -59,6 +72,74 @@ export default function TaskCalendarWidget({ tasks = [], notes = [], onTaskClick
         return cells;
     }, [viewYear, viewMonth]);
 
+    // Rows for servicer report preview table (current month tasks)
+    const servicerRows = useMemo(() => {
+        if (reportType !== 'servicer') return [];
+        return tasks
+            .filter((t) => {
+                const d = t.scheduled_date ? new Date(t.scheduled_date) : null;
+                return d && !Number.isNaN(d.getTime()) && d.getFullYear() === viewYear && d.getMonth() === viewMonth;
+            })
+            .sort((a, b) => (a.scheduled_date || '').localeCompare(b.scheduled_date || ''))
+            .map((task) => {
+                const wo = workOrders.find((w) => String(w.id) === String(task.work_order));
+                let start = '-', end = '-', regular = '-', overtime = '0';
+                if (wo?.travel_start_at) start = formatTime(wo.travel_start_at);
+                if (wo?.travel_end_at) end = formatTime(wo.travel_end_at);
+                if (wo?.travel_start_at && wo?.travel_end_at) {
+                    const deltaH = (new Date(wo.travel_end_at) - new Date(wo.travel_start_at)) / 3_600_000;
+                    if (deltaH > 0) {
+                        const reg = Math.min(deltaH, 8);
+                        const ovt = Math.max(0, deltaH - 8);
+                        regular = reg % 1 === 0 ? String(reg) : reg.toFixed(2);
+                        overtime = ovt > 0 ? (ovt % 1 === 0 ? String(ovt) : ovt.toFixed(2)) : '0';
+                    }
+                }
+                const datum = task.scheduled_date
+                    ? new Date(task.scheduled_date).toLocaleDateString('hr-HR')
+                    : '-';
+                return [
+                    datum,
+                    task.title || '-',
+                    getTaskCraneSerial(task),
+                    getTaskCraneOwner(task),
+                    wo?.location || '-',
+                    start,
+                    end,
+                    regular,
+                    overtime,
+                    task.work_order_label || '-',
+                ];
+            });
+    }, [reportType, tasks, workOrders, viewYear, viewMonth]);
+
+    // Costs report rows: aggregate invoices from work orders linked to tasks in current month
+    const costsRows = useMemo(() => {
+        if (reportType !== 'costs') return [];
+        // Collect work order IDs from tasks in current month
+        const woIds = new Set(
+            tasks
+                .filter((t) => {
+                    const d = t.scheduled_date ? new Date(t.scheduled_date) : null;
+                    return d && !Number.isNaN(d.getTime()) && d.getFullYear() === viewYear && d.getMonth() === viewMonth && t.work_order;
+                })
+                .map((t) => String(t.work_order))
+        );
+        // Filter work orders with invoices
+        return workOrders
+            .filter((wo) => woIds.has(String(wo.id)) && Array.isArray(wo.invoices) && wo.invoices.length > 0)
+            .flatMap((wo) =>
+                wo.invoices.map((inv) => [
+                    inv.datum ? new Date(inv.datum).toLocaleDateString('hr-HR') : '-',
+                    inv.naziv_racuna || '-',
+                    inv.lokacija || '-',
+                    inv.opis || '-',
+                    wo.display_code || '-',
+                ])
+            )
+            .sort((a, b) => (a[0] || '').localeCompare(b[0] || ''));
+    }, [reportType, tasks, workOrders, viewYear, viewMonth]);
+
     const selectedDayKey = selectedDay
         ? `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(selectedDay).padStart(2, '0')}`
         : null;
@@ -86,199 +167,336 @@ export default function TaskCalendarWidget({ tasks = [], notes = [], onTaskClick
         closePanel?.();
     }
 
+    function toggleReport(type) {
+        setReportType((prev) => (prev === type ? null : type));
+    }
+
+    async function handleDownload() {
+        if (downloading) return;
+        setDownloading(true);
+        try {
+            if (reportType === 'servicer') {
+                await downloadMonthlyServiserReport(viewYear, viewMonth + 1);
+            } else {
+                await downloadMonthlyCostsReport(viewYear, viewMonth + 1);
+            }
+        } finally {
+            setDownloading(false);
+        }
+    }
+
     const totalScheduled = Object.values(tasksByDate).flat().length;
     const totalNoteReminders = Object.values(notesByDate).flat().length;
 
     return (
         <LeftSlideDrawer
             drawerId="calendar"
-            title="📅 Kalendar zadataka"
-            tabLabel="📅 Kalendar"
+            title="đź“… Kalendar zadataka"
+            tabLabel="đź“… Kalendar"
             tabTitle="Kalendar zadataka"
             tabTopClassName="top-1/2"
             backdropClassName="z-[45]"
             panelClassName="z-[46]"
             tabClassName="z-[47]"
+            panelWidth={panelWidth}
         >
             {({ close }) => (
-                <>
+                <div className="flex flex-1 min-h-0 overflow-hidden">
 
-                {/* Month navigation */}
-                <div className="flex items-center justify-between px-4 py-2">
-                    <button
-                        type="button"
-                        onClick={prevMonth}
-                        className="rounded p-1 text-sm text-text-main hover:bg-canvas-deep"
-                        aria-label="Prethodni mjesec"
+                    {/* ── Calendar column (fixed 300 px) ── */}
+                    <div
+                        className="flex w-[300px] flex-shrink-0 flex-col overflow-hidden"
+                        style={reportOpen ? { borderRight: '1px solid var(--color-border-hairline, #e5e7eb)' } : {}}
                     >
-                        ◀
-                    </button>
-                    <span className="text-sm font-medium text-text-main">
-                        {MONTH_NAMES[viewMonth]} {viewYear}
-                    </span>
-                    <button
-                        type="button"
-                        onClick={nextMonth}
-                        className="rounded p-1 text-sm text-text-main hover:bg-canvas-deep"
-                        aria-label="Sljedeći mjesec"
-                    >
-                        ▶
-                    </button>
-                </div>
+                        {/* Report toggle buttons */}
+                        <div className="flex gap-1.5 border-b border-border-hairline px-3 py-2">
+                            <button
+                                type="button"
+                                onClick={() => toggleReport('servicer')}
+                                className={[
+                                    'flex-1 rounded px-2 py-1 text-[11px] font-medium transition-colors',
+                                    reportType === 'servicer'
+                                        ? 'bg-indigo-600 text-white'
+                                        : 'bg-canvas-deep text-text-main hover:bg-indigo-50 hover:text-indigo-700',
+                                ].join(' ')}
+                                title="Otvori panel za izradu mjesečnog izvještaja servisera"
+                            >
+                                📊 Izvještaj servisera
+                            </button>
+                            <button
+                                type="button"
+                                onClick={() => toggleReport('costs')}
+                                className={[
+                                    'flex-1 rounded px-2 py-1 text-[11px] font-medium transition-colors',
+                                    reportType === 'costs'
+                                        ? 'bg-emerald-600 text-white'
+                                        : 'bg-canvas-deep text-text-main hover:bg-emerald-50 hover:text-emerald-700',
+                                ].join(' ')}
+                                title="Otvori panel za izradu mjesečnog izvještaja troškova"
+                            >
+                                💰 Izvještaj troškova
+                            </button>
+                        </div>
 
-                {/* Calendar grid */}
-                <div className="px-3">
-                    <div className="grid grid-cols-7 text-center">
-                        {WEEKDAY_LABELS.map((label) => (
-                            <div key={label} className="py-1 text-[11px] font-medium text-text-muted">
-                                {label}
+                        {/* Month navigation */}
+                        <div className="flex items-center justify-between px-4 py-2">
+                            <button
+                                type="button"
+                                onClick={prevMonth}
+                                className="rounded p-1 text-sm text-text-main hover:bg-canvas-deep"
+                                aria-label="Prethodni mjesec"
+                            >
+                                â—€
+                            </button>
+                            <span className="text-sm font-medium text-text-main">
+                                {MONTH_NAMES[viewMonth]} {viewYear}
+                            </span>
+                            <button
+                                type="button"
+                                onClick={nextMonth}
+                                className="rounded p-1 text-sm text-text-main hover:bg-canvas-deep"
+                                aria-label="Sljedeći mjesec"
+                            >
+                                â–¶
+                            </button>
+                        </div>
+
+                        {/* Calendar grid */}
+                        <div className="px-3">
+                            <div className="grid grid-cols-7 text-center">
+                                {WEEKDAY_LABELS.map((label) => (
+                                    <div key={label} className="py-1 text-[11px] font-medium text-text-muted">
+                                        {label}
+                                    </div>
+                                ))}
                             </div>
-                        ))}
-                    </div>
-                    <div className="grid grid-cols-7 gap-y-0.5 text-center">
-                        {calendarDays.map((day, idx) => {
-                            if (!day) return <div key={`e-${idx}`} />;
-                            const key = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
-                            const hasTasks = Boolean(tasksByDate[key]?.length);
-                            const hasNotes = Boolean(notesByDate[key]?.length);
-                            const taskCount = tasksByDate[key]?.length ?? 0;
-                            const noteCount = notesByDate[key]?.length ?? 0;
-                            const isToday =
-                                today.getFullYear() === viewYear &&
-                                today.getMonth() === viewMonth &&
-                                today.getDate() === day;
-                            const isSelected = selectedDay === day;
-                            return (
-                                <button
-                                    key={key}
-                                    type="button"
-                                    onClick={() => handleDayClick(day)}
-                                    title={
-                                        hasTasks || hasNotes
-                                            ? `${taskCount} zadatak/a, ${noteCount} bilješki`
-                                            : undefined
-                                    }
-                                    className={[
-                                        'relative mx-auto flex h-8 w-8 items-center justify-center rounded-full text-xs transition-colors',
-                                        isSelected
-                                            ? 'bg-indigo-600 font-semibold text-white'
-                                            : isToday
-                                            ? 'bg-indigo-50 font-semibold text-indigo-700'
-                                            : hasTasks
-                                            ? 'font-medium text-text-main hover:bg-canvas-deep'
-                                            : 'text-text-main hover:bg-canvas-deep',
-                                    ].join(' ')}
-                                >
-                                    {day}
-                                    {(hasTasks || hasNotes) && (
-                                        <span className="absolute bottom-0.5 left-1/2 flex -translate-x-1/2 items-center gap-0.5">
-                                            {hasTasks && (
-                                                <span
-                                                    className={[
-                                                        'h-1.5 w-1.5 rounded-full',
-                                                        isSelected ? 'bg-white' : 'bg-indigo-500',
-                                                    ].join(' ')}
-                                                />
+                            <div className="grid grid-cols-7 gap-y-0.5 text-center">
+                                {calendarDays.map((day, idx) => {
+                                    if (!day) return <div key={`e-${idx}`} />;
+                                    const key = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+                                    const hasTasks = Boolean(tasksByDate[key]?.length);
+                                    const hasNotes = Boolean(notesByDate[key]?.length);
+                                    const taskCount = tasksByDate[key]?.length ?? 0;
+                                    const noteCount = notesByDate[key]?.length ?? 0;
+                                    const isToday =
+                                        today.getFullYear() === viewYear &&
+                                        today.getMonth() === viewMonth &&
+                                        today.getDate() === day;
+                                    const isSelected = selectedDay === day;
+                                    return (
+                                        <button
+                                            key={key}
+                                            type="button"
+                                            onClick={() => handleDayClick(day)}
+                                            title={hasTasks || hasNotes ? `${taskCount} zadatak/a, ${noteCount} bilješki` : undefined}
+                                            className={[
+                                                'relative mx-auto flex h-8 w-8 items-center justify-center rounded-full text-xs transition-colors',
+                                                isSelected
+                                                    ? 'bg-indigo-600 font-semibold text-white'
+                                                    : isToday
+                                                    ? 'bg-indigo-50 font-semibold text-indigo-700'
+                                                    : hasTasks
+                                                    ? 'font-medium text-text-main hover:bg-canvas-deep'
+                                                    : 'text-text-main hover:bg-canvas-deep',
+                                            ].join(' ')}
+                                        >
+                                            {day}
+                                            {(hasTasks || hasNotes) && (
+                                                <span className="absolute bottom-0.5 left-1/2 flex -translate-x-1/2 items-center gap-0.5">
+                                                    {hasTasks && (
+                                                        <span className={['h-1.5 w-1.5 rounded-full', isSelected ? 'bg-white' : 'bg-indigo-500'].join(' ')} />
+                                                    )}
+                                                    {hasNotes && (
+                                                        <span className={['h-1.5 w-1.5 rounded-full', isSelected ? 'bg-violet-200' : 'bg-violet-500'].join(' ')} />
+                                                    )}
+                                                </span>
                                             )}
-                                            {hasNotes && (
-                                                <span
-                                                    className={[
-                                                        'h-1.5 w-1.5 rounded-full',
-                                                        isSelected ? 'bg-violet-200' : 'bg-violet-500',
-                                                    ].join(' ')}
-                                                />
+                                        </button>
+                                    );
+                                })}
+                            </div>
+                        </div>
+
+                        {/* Divider */}
+                        <div className="mt-2 border-t border-border-hairline" />
+
+                        {/* Task list for selected day OR hint */}
+                        <div className="flex-1 overflow-y-auto px-4 py-3">
+                            {selectedDay ? (
+                                <>
+                                    <p className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-text-muted">
+                                        {formatDayLabel(viewYear, viewMonth, selectedDay)}
+                                    </p>
+                                    {selectedDayTasks.length === 0 && selectedDayNotes.length === 0 ? (
+                                        <p className="text-sm text-text-muted">Nema događaja za odabrani datum.</p>
+                                    ) : (
+                                        <div className="space-y-3">
+                                            {selectedDayNotes.length > 0 && (
+                                                <div>
+                                                    <p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-violet-700">Bilješke</p>
+                                                    <ul className="space-y-1.5">
+                                                        {selectedDayNotes.map((note) => (
+                                                            <li key={note.id} className="rounded-lg border border-violet-200 bg-violet-50 px-3 py-2 text-sm text-violet-900">
+                                                                <span className="block">{note.note}</span>
+                                                                <span className="mt-0.5 block text-[11px] text-violet-700">
+                                                                    {note.task_title || note.work_order_label || 'Servisni kontekst'}
+                                                                </span>
+                                                            </li>
+                                                        ))}
+                                                    </ul>
+                                                </div>
                                             )}
-                                        </span>
+                                            {selectedDayTasks.length > 0 && (
+                                                <div>
+                                                    <p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-indigo-700">Zadaci</p>
+                                                    <ul className="space-y-1.5">
+                                                        {selectedDayTasks.map((task) => (
+                                                            <li key={task.id}>
+                                                                <button
+                                                                    type="button"
+                                                                    onClick={() => handleTaskClick(task, close)}
+                                                                    className="w-full rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-left text-sm hover:bg-indigo-50 hover:border-indigo-200 transition-colors"
+                                                                >
+                                                                    <span className="block truncate font-medium text-text-main">{task.title || '-'}</span>
+                                                                    <span className="mt-0.5 block text-[11px] text-text-muted">
+                                                                        {task.assigned_to_name || '-'} • {getStatusLabel(task.status || '-')}
+                                                                    </span>
+                                                                    <span className="mt-0.5 block text-[11px] text-text-muted">
+                                                                        {getTaskCraneSerial(task)} • {getTaskCraneKind(task)} • {getTaskCraneOwner(task)}
+                                                                    </span>
+                                                                </button>
+                                                            </li>
+                                                        ))}
+                                                    </ul>
+                                                </div>
+                                            )}
+                                        </div>
                                     )}
-                                </button>
-                            );
-                        })}
-                    </div>
-                </div>
-
-                {/* Divider */}
-                <div className="mt-2 border-t border-border-hairline" />
-
-                {/* Task list for selected day OR hint */}
-                <div className="flex-1 overflow-y-auto px-4 py-3">
-                    {selectedDay ? (
-                        <>
-                            <p className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-text-muted">
-                                {formatDayLabel(viewYear, viewMonth, selectedDay)}
-                            </p>
-                            {selectedDayTasks.length === 0 && selectedDayNotes.length === 0 ? (
-                                <p className="text-sm text-text-muted">Nema događaja za odabrani datum.</p>
+                                </>
                             ) : (
-                                <div className="space-y-3">
-                                    {selectedDayNotes.length > 0 && (
-                                        <div>
-                                            <p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-violet-700">Bilješke</p>
-                                            <ul className="space-y-1.5">
-                                                {selectedDayNotes.map((note) => (
-                                                    <li key={note.id} className="rounded-lg border border-violet-200 bg-violet-50 px-3 py-2 text-sm text-violet-900">
-                                                        <span className="block">{note.note}</span>
-                                                        <span className="mt-0.5 block text-[11px] text-violet-700">
-                                                            {note.task_title || note.work_order_label || 'Servisni kontekst'}
-                                                        </span>
-                                                    </li>
-                                                ))}
-                                            </ul>
-                                        </div>
+                                <>
+                                    <p className="text-xs text-text-muted">
+                                        Odaberite datum u kalendaru za prikaz zadataka.
+                                    </p>
+                                    {totalScheduled > 0 && (
+                                        <p className="mt-1.5 text-xs font-medium text-indigo-600">
+                                            {totalScheduled} zadatak/a s planiranim datumom.
+                                        </p>
                                     )}
-                                    {selectedDayTasks.length > 0 && (
-                                        <div>
-                                            <p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-indigo-700">Zadaci</p>
-                                            <ul className="space-y-1.5">
-                                                {selectedDayTasks.map((task) => (
-                                                    <li key={task.id}>
-                                                        <button
-                                                            type="button"
-                                                            onClick={() => handleTaskClick(task, close)}
-                                                            className="w-full rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-left text-sm hover:bg-indigo-50 hover:border-indigo-200 transition-colors"
-                                                        >
-                                                            <span className="block truncate font-medium text-text-main">
-                                                                {task.title || '-'}
-                                                            </span>
-                                                            <span className="mt-0.5 block text-[11px] text-text-muted">
-                                                                {task.assigned_to_name || '-'} •{' '}
-                                                                {getStatusLabel(task.status || '-')}
-                                                            </span>
-                                                            <span className="mt-0.5 block text-[11px] text-text-muted">
-                                                                {getTaskCraneSerial(task)} • {getTaskCraneKind(task)} • {getTaskCraneOwner(task)}
-                                                            </span>
-                                                        </button>
-                                                    </li>
-                                                ))}
-                                            </ul>
-                                        </div>
+                                    {totalNoteReminders > 0 && (
+                                        <p className="mt-1 text-xs font-medium text-violet-600">
+                                            {totalNoteReminders} bilješki/podsjetnika u kalendaru.
+                                        </p>
                                     )}
+                                    {totalScheduled === 0 && (
+                                        <p className="mt-1.5 text-[11px] text-text-muted">
+                                            Nijedan zadatak nema postavljen planirani datum.
+                                        </p>
+                                    )}
+                                </>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* ── Report panel (visible when reportType is set) ── */}
+                    {reportOpen && (
+                        <div className="flex flex-1 flex-col overflow-hidden">
+                            {/* Report header */}
+                            <div className="flex items-center justify-between border-b border-border-hairline px-4 py-2">
+                                <div>
+                                    <span className="text-sm font-semibold text-text-main">
+                                        {reportType === 'servicer' ? '📊 Izvještaj servisera' : '💰 Izvještaj troškova'}
+                                    </span>
+                                    <span className="ml-2 text-xs text-text-muted">
+                                        {MONTH_NAMES[viewMonth]} {viewYear}
+                                    </span>
                                 </div>
-                            )}
-                        </>
-                    ) : (
-                        <>
-                            <p className="text-xs text-text-muted">
-                                Odaberite datum u kalendaru za prikaz zadataka.
+                                <button
+                                    type="button"
+                                    onClick={() => downloadMonthlyServiserReport && handleDownload()}
+                                    disabled={downloading}
+                                    className="flex items-center gap-1.5 rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700 disabled:opacity-60"
+                                >
+                                    {downloading ? '⏳' : '📥'} Preuzmi DOCX
+                                </button>
+                            </div>
+
+                            {/* Report info note */}
+                            <p className="border-b border-border-hairline bg-canvas-deep px-4 py-1.5 text-[11px] text-text-muted">
+                                {reportType === 'servicer'
+                                    ? 'Pregled podataka za odabrani mjesec. Preuzmi DOCX za točan i formatiran izvještaj.'
+                                    : 'Pregled troškova za odabrani mjesec iz putnih naloga. Preuzmi DOCX za točan izvještaj.'
+                                }
                             </p>
-                            {totalScheduled > 0 && (
-                                <p className="mt-1.5 text-xs font-medium text-indigo-600">
-                                    {totalScheduled} zadatak/a s planiranim datumom.
-                                </p>
-                            )}
-                            {totalNoteReminders > 0 && (
-                                <p className="mt-1 text-xs font-medium text-violet-600">
-                                    {totalNoteReminders} bilješki/podsjetnika u kalendaru.
-                                </p>
-                            )}
-                            {totalScheduled === 0 && (
-                                <p className="mt-1.5 text-[11px] text-text-muted">
-                                    Nijedan zadatak nema postavljen planirani datum.
-                                </p>
-                            )}
-                        </>
+
+                            {/* Table */}
+                            <div className="flex-1 overflow-auto">
+                                {reportType === 'servicer' && (
+                                    servicerRows.length === 0 ? (
+                                        <p className="px-4 py-8 text-center text-sm text-text-muted">
+                                            Nema zadataka za {MONTH_NAMES[viewMonth]} {viewYear}.
+                                        </p>
+                                    ) : (
+                                        <table className="w-full min-w-[580px] border-collapse text-[11px]">
+                                            <thead>
+                                                <tr className="bg-canvas-deep">
+                                                    {SERVICER_HEADERS.map((h) => (
+                                                        <th key={h} className="border border-border-hairline px-2 py-1.5 text-left font-semibold text-text-muted whitespace-nowrap">
+                                                            {h}
+                                                        </th>
+                                                    ))}
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {servicerRows.map((row, i) => (
+                                                    <tr key={i} className={i % 2 === 0 ? 'bg-canvas-base' : 'bg-canvas-deep'}>
+                                                        {row.map((cell, j) => (
+                                                            <td key={j} className="border border-border-hairline px-2 py-1 text-text-main whitespace-nowrap">
+                                                                {cell}
+                                                            </td>
+                                                        ))}
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                        </table>
+                                    )
+                                )}
+                                {reportType === 'costs' && (
+                                    costsRows.length === 0 ? (
+                                        <p className="px-4 py-8 text-center text-sm text-text-muted">
+                                            Nema troškova za {MONTH_NAMES[viewMonth]} {viewYear}.
+                                            <br />
+                                            <span className="text-[11px]">Napomena: prikaz ovisi o dostupnim podacima raÄŤuna u putnim nalozima.</span>
+                                        </p>
+                                    ) : (
+                                        <table className="w-full min-w-[400px] border-collapse text-[11px]">
+                                            <thead>
+                                                <tr className="bg-canvas-deep">
+                                                    {['DATUM', 'NAZIV RAÄŚUNA', 'LOKACIJA', 'OPIS', 'RADNI NALOG'].map((h) => (
+                                                        <th key={h} className="border border-border-hairline px-2 py-1.5 text-left font-semibold text-text-muted whitespace-nowrap">
+                                                            {h}
+                                                        </th>
+                                                    ))}
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {costsRows.map((row, i) => (
+                                                    <tr key={i} className={i % 2 === 0 ? 'bg-canvas-base' : 'bg-canvas-deep'}>
+                                                        {row.map((cell, j) => (
+                                                            <td key={j} className="border border-border-hairline px-2 py-1 text-text-main whitespace-nowrap">
+                                                                {cell}
+                                                            </td>
+                                                        ))}
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                        </table>
+                                    )
+                                )}
+                            </div>
+                        </div>
                     )}
                 </div>
-                </>
             )}
         </LeftSlideDrawer>
     );

frontend/src/components/dashboard/WorkOrderDetailModal.jsx

@@ -2,15 +2,19 @@ import { useEffect, useMemo, useState } from 'preact/hooks';
 import { useStore } from '@nanostores/preact';
 import WorkOrderImageCarousel from './WorkOrderImageCarousel';
 import WorkOrderPhotoUpload from '../fleet/WorkOrderPhotoUpload';
+import TaskCreateModal from './TaskCreateModal';
 import ModalShell from '../ui/ModalShell';
 import {
     createWorkOrderInvoice,
+    fetchTasksByWorkOrder,
     fetchTeamMembers,
     fetchWorkOrderInvoices,
     fetchWorkOrderImages,
     openWorkOrderInvoicesPdfPage,
     sendWorkOrderEmail,
+    updateVehicle,
 } from '../../stores/fleetDashboardStore';
+import { getStatusLabel } from '../../stores/taskStore';
 import { showToast } from '../../stores/toastStore';
 import { formatWorkOrderDisplayCode } from '../../lib/displayIds';
 import { $serviceNotes, $serviceNotesLoading, fetchServiceNotes } from '../../stores/serviceNotesStore';
@@ -81,6 +85,12 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
     const [selectedLocation, setSelectedLocation] = useState(null);
     const [searchingLocation, setSearchingLocation] = useState(false);
     const [mapError, setMapError] = useState('');
+    const [workOrderTasks, setWorkOrderTasks] = useState([]);
+    const [addTaskModalOpen, setAddTaskModalOpen] = useState(false);
+    const [craneDataModalOpen, setCraneDataModalOpen] = useState(false);
+    const [craneDataForm, setCraneDataForm] = useState({ superstructure_working_hours: '', chassis_working_hours: '', current_mileage: '' });
+    const [savingCraneData, setSavingCraneData] = useState(false);
+    const [craneDataError, setCraneDataError] = useState('');
 
     const craneLabel = useMemo(() => {
         if (!workOrder) return '-';
@@ -168,6 +178,12 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
         setSelectedLocation(null);
         setSearchingLocation(false);
         setMapError('');
+        setWorkOrderTasks([]);
+        setAddTaskModalOpen(false);
+        setCraneDataModalOpen(false);
+        setCraneDataForm({ superstructure_working_hours: '', chassis_working_hours: '', current_mileage: '' });
+        setSavingCraneData(false);
+        setCraneDataError('');
     }, [open, workOrder]);
 
     useEffect(() => {
@@ -251,6 +267,23 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
         };
     }, [open, workOrder?.id]);
 
+    useEffect(() => {
+        if (!open || !workOrder?.id) {
+            setWorkOrderTasks([]);
+            return;
+        }
+        let cancelled = false;
+        (async () => {
+            try {
+                const tasks = await fetchTasksByWorkOrder(workOrder.id);
+                if (!cancelled) setWorkOrderTasks(tasks);
+            } catch {
+                if (!cancelled) setWorkOrderTasks([]);
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [open, workOrder?.id]);
+
     const selectedMapEmbedUrl = (() => {
         if (!selectedLocation) return null;
         const lat = Number(selectedLocation.lat);
@@ -265,6 +298,60 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
         return null;
     }
 
+    const craneVehicleId = workOrder.vehicle || workOrder.crane;
+    const craneVehicle = workOrder.craneInfo || null;
+
+    const openCraneDataModal = () => {
+        setCraneDataForm({
+            superstructure_working_hours: String(craneVehicle?.superstructure_working_hours ?? ''),
+            chassis_working_hours: String(craneVehicle?.chassis_working_hours ?? ''),
+            current_mileage: String(craneVehicle?.current_mileage ?? ''),
+        });
+        setCraneDataError('');
+        setCraneDataModalOpen(true);
+    };
+
+    const handleSaveCraneData = async () => {
+        if (!craneVehicleId) {
+            setCraneDataError('Dizalica nije pronađena.');
+            return;
+        }
+        const superstructure = craneDataForm.superstructure_working_hours === '' ? undefined : Number(craneDataForm.superstructure_working_hours);
+        const chassis = craneDataForm.chassis_working_hours === '' ? undefined : Number(craneDataForm.chassis_working_hours);
+        const mileage = craneDataForm.current_mileage === '' ? undefined : Number(craneDataForm.current_mileage);
+        if (superstructure !== undefined && (Number.isNaN(superstructure) || superstructure < 0)) {
+            setCraneDataError('Radni sati superstrukture moraju biti pozitivan broj.');
+            return;
+        }
+        if (chassis !== undefined && (Number.isNaN(chassis) || chassis < 0)) {
+            setCraneDataError('Radni sati podvozja moraju biti pozitivan broj.');
+            return;
+        }
+        if (mileage !== undefined && (Number.isNaN(mileage) || mileage < 0)) {
+            setCraneDataError('Kilometraža mora biti pozitivan broj.');
+            return;
+        }
+        const payload = {};
+        if (superstructure !== undefined) payload.superstructure_working_hours = superstructure;
+        if (chassis !== undefined) payload.chassis_working_hours = chassis;
+        if (mileage !== undefined) payload.current_mileage = mileage;
+        if (Object.keys(payload).length === 0) {
+            setCraneDataError('Nije unesena niti jedna vrijednost za ažuriranje.');
+            return;
+        }
+        setSavingCraneData(true);
+        setCraneDataError('');
+        try {
+            await updateVehicle(craneVehicleId, payload);
+            showToast('Podaci dizalice su uspješno ažurirani.', 'success');
+            setCraneDataModalOpen(false);
+        } catch (err) {
+            setCraneDataError(err?.message || 'Ažuriranje podataka dizalice nije uspjelo.');
+        } finally {
+            setSavingCraneData(false);
+        }
+    };
+
     const searchLocation = async () => {
         const query = locationQuery.trim();
         if (!query) {
@@ -522,6 +609,13 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
                             >
                                 Dodaj račun
                             </button>
+                            <button
+                                type="button"
+                                onClick={openCraneDataModal}
+                                className="rounded-md border border-border-hairline px-3 py-2 text-xs font-medium text-text-main hover:bg-canvas-deep"
+                            >
+                                🔧 Izmijeni podatke dizalice
+                            </button>
                             <button
                                 type="button"
                                 onClick={() => {
@@ -540,6 +634,33 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
                         )}
                     </div>
 
+                    <div className="rounded-xl border border-border-hairline bg-canvas-base p-3">
+                        <div className="mb-2 flex items-center justify-between">
+                            <h4 className="text-sm font-semibold text-text-main">Zadaci putnog naloga ({workOrderTasks.length})</h4>
+                            <button
+                                type="button"
+                                onClick={() => setAddTaskModalOpen(true)}
+                                className="rounded-md border border-border-hairline px-2 py-1 text-xs font-medium text-text-main hover:bg-canvas-deep"
+                            >
+                                + Dodaj zadatak
+                            </button>
+                        </div>
+                        {workOrderTasks.length === 0 ? (
+                            <p className="text-xs text-text-muted">Nema zadataka za ovaj putni nalog.</p>
+                        ) : (
+                            <ul className="space-y-1">
+                                {workOrderTasks.map((task) => (
+                                    <li key={task.id} className="flex items-center justify-between rounded-lg bg-canvas-deep px-3 py-2 text-sm">
+                                        <span className="font-medium text-text-main">{task.title}</span>
+                                        <span className="rounded-full bg-canvas-base px-2 py-0.5 text-[11px] text-text-muted border border-border-hairline">
+                                            {getStatusLabel(task.status)}
+                                        </span>
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </div>
+
                     <div className="rounded-xl border border-border-hairline bg-canvas-base p-3">
                         <h4 className="mb-2 text-sm font-semibold text-text-main">Status</h4>
                         <label className="mb-3 flex flex-col gap-1 text-sm">
@@ -1165,6 +1286,99 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
                     }
                 }}
             />
+            <TaskCreateModal
+                open={addTaskModalOpen}
+                workOrders={[workOrder]}
+                contextCrane={craneVehicle || { id: craneVehicleId, registration_number: craneLabel }}
+                onClose={() => setAddTaskModalOpen(false)}
+                onSuccess={async () => {
+                    const tasks = await fetchTasksByWorkOrder(workOrder.id).catch(() => []);
+                    setWorkOrderTasks(tasks);
+                }}
+            />
+            {craneDataModalOpen && (
+                <ModalShell
+                    onClose={() => setCraneDataModalOpen(false)}
+                    overlayClassName="z-[60] overflow-y-auto p-4 pt-16"
+                    contentClassName="flex items-start justify-center min-h-full"
+                    panelClassName="w-full max-w-md rounded-xl border border-border-hairline bg-canvas-elevated shadow-xl"
+                >
+                    <div>
+                        <div className="flex items-center justify-between border-b border-border-hairline px-4 py-3">
+                            <div>
+                                <h4 className="text-sm font-semibold text-text-main">Izmijeni podatke dizalice</h4>
+                                <p className="text-xs text-text-muted">{craneLabel}</p>
+                            </div>
+                            <button
+                                type="button"
+                                onClick={() => setCraneDataModalOpen(false)}
+                                className="rounded-md px-2 py-1 text-sm text-text-muted hover:bg-canvas-deep"
+                                aria-label="Zatvori"
+                            >
+                                ✕
+                            </button>
+                        </div>
+                        <div className="space-y-4 px-4 py-4">
+                            <label className="flex flex-col gap-1 text-sm">
+                                <span className="font-medium text-text-main">Radni sati superstrukture</span>
+                                <input
+                                    type="number"
+                                    min="0"
+                                    value={craneDataForm.superstructure_working_hours}
+                                    onInput={(e) => setCraneDataForm((p) => ({ ...p, superstructure_working_hours: e.currentTarget.value }))}
+                                    className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main"
+                                    placeholder={String(craneVehicle?.superstructure_working_hours ?? '0')}
+                                />
+                            </label>
+                            <label className="flex flex-col gap-1 text-sm">
+                                <span className="font-medium text-text-main">Radni sati podvozja</span>
+                                <input
+                                    type="number"
+                                    min="0"
+                                    value={craneDataForm.chassis_working_hours}
+                                    onInput={(e) => setCraneDataForm((p) => ({ ...p, chassis_working_hours: e.currentTarget.value }))}
+                                    className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main"
+                                    placeholder={String(craneVehicle?.chassis_working_hours ?? '0')}
+                                />
+                            </label>
+                            <label className="flex flex-col gap-1 text-sm">
+                                <span className="font-medium text-text-main">Prijeđeni kilometri dizalice</span>
+                                <input
+                                    type="number"
+                                    min="0"
+                                    value={craneDataForm.current_mileage}
+                                    onInput={(e) => setCraneDataForm((p) => ({ ...p, current_mileage: e.currentTarget.value }))}
+                                    className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main"
+                                    placeholder={String(craneVehicle?.current_mileage ?? '0')}
+                                />
+                            </label>
+                            {craneDataError && (
+                                <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+                                    {craneDataError}
+                                </div>
+                            )}
+                        </div>
+                        <div className="flex justify-end gap-2 border-t border-border-hairline px-4 py-3">
+                            <button
+                                type="button"
+                                onClick={() => setCraneDataModalOpen(false)}
+                                className="rounded-md border border-border-hairline px-3 py-2 text-xs font-medium text-text-main hover:bg-canvas-deep"
+                                disabled={savingCraneData}
+                            >
+                                Odustani
+                            </button>
+                            <button
+                                type="button"
+                                onClick={handleSaveCraneData}
+                                disabled={savingCraneData}
+                                className="rounded-md bg-indigo-600 px-3 py-2 text-xs font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"
+                            >
+                                {savingCraneData ? 'Spremam…' : 'Spremi podatke'}
+                            </button>
+                        </div>
+                    </div>
+                </ModalShell>
+            )}
         </>
     );
 }

frontend/src/components/layout/TaskCalendarPortal.jsx

@@ -103,6 +103,7 @@ export default function TaskCalendarPortal() {
             <TaskCalendarWidget
                 tasks={tasks}
                 notes={notes}
+                workOrders={activeWorkOrders}
                 onTaskClick={handleTaskClick}
             />
             <ServiceNotesWidget

frontend/src/stores/fleetDashboardStore.js

@@ -721,6 +721,14 @@ export async function fetchWorkOrderById(workOrderId) {
     return await api.get(`fleet/work-orders/${encodeURIComponent(workOrderId)}/`);
 }
 
+export async function fetchTasksByWorkOrder(workOrderId) {
+    if (!workOrderId) {
+        return [];
+    }
+    const data = await api.get(`tasks/tasks/?work_order=${encodeURIComponent(workOrderId)}`);
+    return Array.isArray(data) ? data : (data?.results ?? []);
+}
+
 export async function fetchWorkOrderTaskServiceContext(workOrderId) {
     if (!workOrderId) {
         return { tasks: [], additional_costs_table: null };
@@ -905,6 +913,34 @@ export async function downloadWorkOrderInvoicesDocx(workOrderId) {
     }
 }
 
+export async function downloadMonthlyServiserReport(year, month) {
+    try {
+        const blob = await api.get(
+            `fleet/reports/monthly-servicer/?year=${year}&month=${month}`,
+            { responseType: 'blob' },
+        );
+        saveBlobToFile(blob, `izvjestaj-servisera-${year}-${String(month).padStart(2, '0')}.docx`);
+        showToast('Izvještaj servisera je preuzet.', 'success');
+    } catch (err) {
+        showToast(err?.message || 'Preuzimanje izvještaja servisera nije uspjelo.', 'error');
+        throw err;
+    }
+}
+
+export async function downloadMonthlyCostsReport(year, month) {
+    try {
+        const blob = await api.get(
+            `fleet/reports/monthly-costs/?year=${year}&month=${month}`,
+            { responseType: 'blob' },
+        );
+        saveBlobToFile(blob, `troskovi-servisera-${year}-${String(month).padStart(2, '0')}.docx`);
+        showToast('Izvještaj troškova je preuzet.', 'success');
+    } catch (err) {
+        showToast(err?.message || 'Preuzimanje izvještaja troškova nije uspjelo.', 'error');
+        throw err;
+    }
+}
+
 export async function downloadGeneratedPdfByUrl(downloadUrl, filename = 'document.pdf') {
     if (!downloadUrl) {
         showToast('Nedostaje URL za preuzimanje PDF-a.', 'error');