feat: add per-task PDF/DOCX export for service records

Enable generating service-record documents for a single task on /putni-nalozi/racuni while preserving existing full work-order export.

- Backend service-records PDF/DOCX endpoints now accept optional task_id and validate the task belongs to the selected work order.
- Document builders support scoped task lists, and per-task downloads use task-specific filenames.
- Frontend task cards now include per-task PDF/DOCX actions, while top-level buttons are clarified as exporting all service records.

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

backend/modules/fleet/views.py

@@ -210,6 +210,32 @@ def _docx_filename(work_order, doc_type):
     return f"{display_code}.work-order.docx"
 
 
+def _service_records_pdf_filename(work_order, task=None):
+    if not task:
+        return _pdf_filename(work_order, 'service_records')
+    display_code = _work_order_display_code(work_order)
+    return f"{display_code}.task-{task.pk}.work-order-service-records.pdf"
+
+
+def _service_records_docx_filename(work_order, task=None):
+    if not task:
+        return _docx_filename(work_order, 'service_records')
+    display_code = _work_order_display_code(work_order)
+    return f"{display_code}.task-{task.pk}.work-order-service-records.docx"
+
+
+def _resolve_service_report_tasks(work_order, task_id):
+    queryset = _work_order_related_tasks_queryset(work_order)
+    if not task_id:
+        return list(queryset), None
+    selected_task = queryset.filter(pk=task_id).first()
+    if not selected_task:
+        raise DRFValidationError({
+            'task_id': 'Odabrani task nije povezan s ovim putnim nalogom.'
+        })
+    return [selected_task], selected_task
+
+
 def _compress_image_for_pdf(image_field, max_width=1280, quality=75):
     """
     Otvori image_field (Django FileField), kompresiraj na max_width JPEG u memoriji,
@@ -884,7 +910,7 @@ def _build_work_order_pdf(work_order):
     return buffer.getvalue()
 
 
-def _build_work_order_service_records_pdf(work_order):
+def _build_work_order_service_records_pdf(work_order, related_tasks=None):
     vehicle = work_order.vehicle
     client_name = getattr(vehicle.client, 'name', None) or '-'
     manufacturer_str = str(vehicle.make or '-')
@@ -900,17 +926,28 @@ def _build_work_order_service_records_pdf(work_order):
     FOOTER_H = 72
     MARGIN = 28
 
+    if related_tasks is None:
+        related_tasks = list(_work_order_related_tasks_queryset(work_order))
+    else:
+        related_tasks = list(related_tasks)
+    # Collect service records for all task vehicles (supports cross-crane work orders)
+    task_vehicle_ids = list({task.vehicle_id for task in related_tasks if task.vehicle_id})
     service_rows = list(
         VehicleServiceRecord.objects.filter(
             is_active=True,
-            vehicle_id=work_order.vehicle_id,
+            vehicle_id__in=task_vehicle_ids if task_vehicle_ids else [work_order.vehicle_id],
         )
         .select_related('performed_by', 'task')
         .prefetch_related('photos')
         .order_by('service_date', 'created_at')
     )
-    related_tasks = list(_work_order_related_tasks_queryset(work_order))
-    notes_text = str(work_order.notes or '').strip()
+    # Per-task notes; fall back to work_order.notes
+    task_note_parts = [
+        str(task.service_report_note or '').strip()
+        for task in related_tasks
+        if str(task.service_report_note or '').strip()
+    ]
+    notes_text = "\n".join(task_note_parts) if task_note_parts else str(work_order.notes or '').strip()
 
     buffer = BytesIO()
 
@@ -1804,7 +1841,7 @@ def _build_work_order_docx_bytes(work_order):
     return buffer.getvalue()
 
 
-def _build_work_order_service_records_docx_bytes(work_order):
+def _build_work_order_service_records_docx_bytes(work_order, related_tasks=None):
     from docx.shared import Cm
 
     doc = _create_docx_document(SERVICE_REPORT_DOCX_TEMPLATE_NAME)
@@ -1812,9 +1849,11 @@ def _build_work_order_service_records_docx_bytes(work_order):
     client_name = getattr(getattr(vehicle, 'client', None), 'name', None) or '-'
     servicer_name = _user_display_name(work_order.creator) or '-'
     completion_label = "Da ☒    Ne ☐" if work_order.status == 'closed' else "Da ☐    Ne ☒"
-    notes_text = str(work_order.notes or '').strip() or '-'
 
-    related_tasks = list(_work_order_related_tasks_queryset(work_order))
+    if related_tasks is None:
+        related_tasks = list(_work_order_related_tasks_queryset(work_order).select_related('work_hours_table'))
+    else:
+        related_tasks = list(related_tasks)
     normalized_rows = []
     for task in related_tasks:
         table_data = getattr(getattr(task, 'work_hours_table', None), 'data', None)
@@ -1847,10 +1886,13 @@ def _build_work_order_service_records_docx_bytes(work_order):
                 'vehicle_km': str(row.get('vehicle_km', '') or '').strip() or '-',
             })
 
+    # Collect service records per task, filtering by each task's own vehicle
+    # (supports cross-crane work orders where each task may have a different crane).
+    task_vehicle_ids = list({task.vehicle_id for task in related_tasks if task.vehicle_id})
     service_rows = list(
         VehicleServiceRecord.objects.filter(
             is_active=True,
-            vehicle_id=work_order.vehicle_id,
+            vehicle_id__in=task_vehicle_ids,
         )
         .select_related('performed_by', 'task')
         .prefetch_related('photos')
@@ -1861,6 +1903,14 @@ def _build_work_order_service_records_docx_bytes(work_order):
         for task in related_tasks
     }
 
+    # Build notes: use per-task service_report_note; fall back to work_order.notes
+    task_note_parts = [
+        str(task.service_report_note or '').strip()
+        for task in related_tasks
+        if str(task.service_report_note or '').strip()
+    ]
+    notes_text = "\n".join(task_note_parts) if task_note_parts else (str(work_order.notes or '').strip() or '-')
+
     if len(doc.tables) >= 4:
         info_table = doc.tables[0]
         _set_docx_cell_text(info_table, 1, 0, client_name)
@@ -1893,7 +1943,6 @@ def _build_work_order_service_records_docx_bytes(work_order):
             target_row.cells[3].text = entry['changed_at']
 
         details_table = doc.tables[3]
-        issue_text = str(work_order.notes or '-').strip() or '-'
         repair_lines = []
         for task in related_tasks:
             task_records = records_by_task.get(task.id, [])
@@ -1904,7 +1953,7 @@ def _build_work_order_service_records_docx_bytes(work_order):
                 description = str(record.description or '-').strip() or '-'
                 repair_lines.append(f"- {description}")
         repair_text = "\n".join(repair_lines) if repair_lines else '-'
-        _set_docx_cell_text(details_table, 0, 0, f"Kvar: {issue_text}")
+        _set_docx_cell_text(details_table, 0, 0, f"Kvar: {notes_text}")
         _set_docx_cell_text(details_table, 1, 0, f"Popravak: {repair_text}")
     else:
         raise DRFValidationError({"detail": "DOCX template ima neočekivanu strukturu (nedostaju tablice)."})
@@ -2775,27 +2824,38 @@ class WorkOrderViewSet(viewsets.ModelViewSet):
     @action(detail=True, methods=['get'], url_path='service-records-pdf')
     def service_records_pdf(self, request, pk=None):
         work_order = self.get_object()
-        _cleanup_expired_generated_pdfs()
-        cached = _get_cached_pdf(work_order, 'service_records')
-        if cached:
-            return _cached_pdf_file_response(cached, default_filename=_pdf_filename(work_order, 'service_records'))
+        task_id = request.query_params.get('task_id')
+        related_tasks, selected_task = _resolve_service_report_tasks(work_order, task_id)
 
-        _notify_pdf_request(user=request.user, work_order=work_order, doc_type='service_records', stage='requested')
-        pdf_bytes = _build_work_order_service_records_pdf(work_order)
-        _notify_pdf_request(user=request.user, work_order=work_order, doc_type='service_records', stage='completed')
+        if not selected_task:
+            _cleanup_expired_generated_pdfs()
+            cached = _get_cached_pdf(work_order, 'service_records')
+            if cached:
+                return _cached_pdf_file_response(
+                    cached,
+                    default_filename=_service_records_pdf_filename(work_order),
+                )
+            _notify_pdf_request(user=request.user, work_order=work_order, doc_type='service_records', stage='requested')
+
+        pdf_bytes = _build_work_order_service_records_pdf(work_order, related_tasks=related_tasks)
+
+        if not selected_task:
+            _notify_pdf_request(user=request.user, work_order=work_order, doc_type='service_records', stage='completed')
         response = HttpResponse(pdf_bytes, content_type='application/pdf')
-        response['Content-Disposition'] = f'attachment; filename="{_pdf_filename(work_order, "service_records")}"'
+        response['Content-Disposition'] = f'attachment; filename="{_service_records_pdf_filename(work_order, selected_task)}"'
         return response
 
     @action(detail=True, methods=['get'], url_path='service-records-docx')
     def service_records_docx(self, request, pk=None):
         work_order = self.get_object()
-        docx_bytes = _build_work_order_service_records_docx_bytes(work_order)
+        task_id = request.query_params.get('task_id')
+        related_tasks, selected_task = _resolve_service_report_tasks(work_order, task_id)
+        docx_bytes = _build_work_order_service_records_docx_bytes(work_order, related_tasks=related_tasks)
         response = HttpResponse(
             docx_bytes,
             content_type='application/vnd.openxmlformats-officedocument.wordprocessingml.document',
         )
-        response['Content-Disposition'] = f'attachment; filename="{_docx_filename(work_order, "service_records")}"'
+        response['Content-Disposition'] = f'attachment; filename="{_service_records_docx_filename(work_order, selected_task)}"'
         return response
 
     @action(detail=True, methods=['post'], url_path='service-records-pdf-request')
@@ -2922,7 +2982,10 @@ class WorkOrderViewSet(viewsets.ModelViewSet):
         payload = []
         for task in tasks:
             records_payload = []
-            for record in task.service_records.filter(is_active=True, vehicle_id=work_order.vehicle_id).all():
+            # Filter records by the task's own vehicle (not work_order.vehicle) to support
+            # cross-crane work orders where each task may belong to a different crane.
+            task_vehicle_id = task.vehicle_id
+            for record in task.service_records.filter(is_active=True, vehicle_id=task_vehicle_id).all():
                 photos_payload = []
                 for photo in record.photos.filter(is_active=True).all():
                     if not photo.image:
@@ -2950,6 +3013,7 @@ class WorkOrderViewSet(viewsets.ModelViewSet):
                 'title': task.title,
                 'status': task.status,
                 'description': task.description,
+                'service_report_note': task.service_report_note or '',
                 'assigned_to_name': _user_display_name(task.assigned_to),
                 'vehicle_registration': getattr(task.vehicle, 'registration_number', None),
                 'work_hours_table': getattr(getattr(task, 'work_hours_table', None), 'data', None),

backend/modules/task_management/migrations/0012_task_service_report_note.py

@@ -0,0 +1,21 @@
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('task_management', '0011_taskcalendar'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='task',
+            name='service_report_note',
+            field=models.TextField(
+                blank=True,
+                default='',
+                verbose_name='Napomena izvještaja servisera',
+                help_text='Tekst napomene za PDF izvještaj servisera za ovaj zadatak.',
+            ),
+        ),
+    ]

backend/modules/task_management/models.py

@@ -54,6 +54,12 @@ class Task(BaseModel):
         verbose_name=_("Planirani datum izvršenja"),
         help_text=_("Datum kada je planirano izvršenje radnog zadatka."),
     )
+    service_report_note = models.TextField(
+        blank=True,
+        default='',
+        verbose_name=_("Napomena izvještaja servisera"),
+        help_text=_("Tekst napomene za PDF izvještaj servisera za ovaj zadatak."),
+    )
 
     class Meta:
         ordering = ['-created_at']

backend/modules/task_management/serializers.py

@@ -103,6 +103,7 @@ class TaskSerializer(serializers.ModelSerializer):
             'vehicle_owner_name', 'vehicle_asset_type', 'crane_serial_number',
             'work_order', 'work_order_label',
             'scheduled_date',
+            'service_report_note',
             'template_id', 'auto_close_work_order',
             'created_at',
         ]
@@ -114,6 +115,7 @@ class TaskSerializer(serializers.ModelSerializer):
             'work_order': {'required': False, 'allow_null': True},
             'vehicle': {'required': False, 'allow_null': True},
             'scheduled_date': {'required': False, 'allow_null': True},
+            'service_report_note': {'required': False, 'allow_blank': True},
         }
 
     def validate_title(self, value):

frontend/src/components/dashboard/TaskWorkHoursTableModal.jsx

@@ -137,6 +137,7 @@ const FB_MUTED = [
 export default function TaskWorkHoursTableModal({
     open,
     task,
+    workOrder = null,
     defaultLocation = '',
     saving = false,
     onClose,
@@ -337,6 +338,39 @@ export default function TaskWorkHoursTableModal({
 
                 <div className="space-y-4 overflow-y-auto px-5 py-4">
 
+                    {/* ── read-only work order travel data ── */}
+                    {workOrder && (
+                        <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2.5 text-xs dark:border-amber-800 dark:bg-amber-900/20">
+                            <p className="mb-1.5 font-semibold text-amber-800 dark:text-amber-300">Podaci iz putnog naloga (samo za prikaz)</p>
+                            <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-amber-900 dark:text-amber-200 sm:grid-cols-3">
+                                {workOrder.origin_location && (
+                                    <div><span className="font-medium">Ishodište:</span> {workOrder.origin_location}</div>
+                                )}
+                                {workOrder.location && (
+                                    <div><span className="font-medium">Odredište:</span> {workOrder.location}</div>
+                                )}
+                                {workOrder.travel_start_at && (
+                                    <div><span className="font-medium">Polazak:</span> {new Date(workOrder.travel_start_at).toLocaleString('hr-HR', { dateStyle: 'short', timeStyle: 'short' })}</div>
+                                )}
+                                {workOrder.travel_end_at && (
+                                    <div><span className="font-medium">Povratak:</span> {new Date(workOrder.travel_end_at).toLocaleString('hr-HR', { dateStyle: 'short', timeStyle: 'short' })}</div>
+                                )}
+                                {workOrder.start_mileage != null && (
+                                    <div><span className="font-medium">KM početak:</span> {workOrder.start_mileage}</div>
+                                )}
+                                {workOrder.end_mileage != null && (
+                                    <div><span className="font-medium">KM kraj:</span> {workOrder.end_mileage}</div>
+                                )}
+                                {workOrder.distance != null && (
+                                    <div><span className="font-medium">Prijeđeno km:</span> {workOrder.distance}</div>
+                                )}
+                                {workOrder.servicer_vehicle_registration && (
+                                    <div><span className="font-medium">Vozilo servisera:</span> {workOrder.servicer_vehicle_registration} {workOrder.servicer_vehicle_make_model || ''}</div>
+                                )}
+                            </div>
+                        </div>
+                    )}
+
                     {/* ── info banner ── */}
                     <div className="flex flex-wrap gap-x-4 gap-y-1 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-300">
                         <span><span className="font-semibold">Put (od–do):</span> unesi Put od/do → Sati puta se računaju automatski; Km vozila se popunjava ručno; polja Vr. rada su blokirana.</span>

frontend/src/components/dashboard/WorkOrderInvoicesPdfPage.jsx

@@ -12,13 +12,12 @@ import {
     fetchWorkOrderInvoices,
     fetchWorkOrderTaskServiceContext,
     updateTaskWorkHoursTable,
-    updateWorkOrder,
+    updateTaskServiceReportNote,
     updateWorkOrderAdditionalCostsTable,
 } from '../../stores/fleetDashboardStore';
 import { $accessToken, $authReady, hydrateAuthFromStorage } from '../../stores/authStore';
 import { fetchNotifications, connectNotifications } from '../../stores/notificationStore';
 import { formatWorkOrderDisplayCode } from '../../lib/displayIds';
-import { showToast } from '../../stores/toastStore';
 import { useAuthenticatedMediaSources } from './WorkOrderImageCarousel';
 import TaskWorkHoursTableModal from './TaskWorkHoursTableModal';
 import WorkOrderAdditionalCostsModal from './WorkOrderAdditionalCostsModal';
@@ -155,9 +154,9 @@ export default function WorkOrderInvoicesPdfPage() {
     const [additionalCostsTable, setAdditionalCostsTable] = useState({ data: { rows: [] }, total_for_payout: '0.00' });
     const [editingAdditionalCosts, setEditingAdditionalCosts] = useState(false);
     const [savingAdditionalCosts, setSavingAdditionalCosts] = useState(false);
-    const [editingServiceReportNote, setEditingServiceReportNote] = useState(false);
-    const [savingServiceReportNote, setSavingServiceReportNote] = useState(false);
-    const [serviceReportNoteError, setServiceReportNoteError] = useState('');
+    const [editingTaskNote, setEditingTaskNote] = useState(null);
+    const [savingTaskNote, setSavingTaskNote] = useState(false);
+    const [taskNoteError, setTaskNoteError] = useState('');
     const [invoiceDetailModal, setInvoiceDetailModal] = useState(null);
 
     useEffect(() => {
@@ -277,6 +276,29 @@ export default function WorkOrderInvoicesPdfPage() {
         }
     };
 
+    const handleSaveTaskServiceReportNote = async (note) => {
+        if (!editingTaskNote?.id) return;
+        setSavingTaskNote(true);
+        setTaskNoteError('');
+        try {
+            const updated = await updateTaskServiceReportNote(editingTaskNote.id, note);
+            setTaskContext((prev) => ({
+                ...prev,
+                tasks: (Array.isArray(prev.tasks) ? prev.tasks : []).map((task) => (
+                    String(task.id) === String(editingTaskNote.id)
+                        ? { ...task, service_report_note: updated?.service_report_note ?? note }
+                        : task
+                )),
+            }));
+            setEditingTaskNote(null);
+        } catch (err) {
+            const message = err?.message || 'Spremanje napomene nije uspjelo.';
+            setTaskNoteError(message);
+        } finally {
+            setSavingTaskNote(false);
+        }
+    };
+
     const handleSaveAdditionalCostsTable = async (tableData) => {
         if (!workOrderId) return;
         setSavingAdditionalCosts(true);
@@ -289,24 +311,6 @@ export default function WorkOrderInvoicesPdfPage() {
         }
     };
 
-    const handleSaveServiceReportNote = async (notes) => {
-        if (!workOrderId) return;
-        setSavingServiceReportNote(true);
-        setServiceReportNoteError('');
-        try {
-            const updated = await updateWorkOrder(workOrderId, { notes: String(notes || '') });
-            setWorkOrder(updated);
-            setEditingServiceReportNote(false);
-            showToast('Napomena za izvještaj servisera je spremljena.', 'success');
-        } catch (err) {
-            const message = err?.message || 'Spremanje napomene nije uspjelo.';
-            setServiceReportNoteError(message);
-            showToast(message, 'error');
-        } finally {
-            setSavingServiceReportNote(false);
-        }
-    };
-
     return (
         <section className="mx-auto w-full max-w-5xl space-y-4 p-4 sm:p-6">
             <div className="rounded-xl border border-border-hairline bg-canvas-elevated p-4">
@@ -340,33 +344,13 @@ export default function WorkOrderInvoicesPdfPage() {
                 <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
                     <h2 className="text-lg font-semibold text-text-main">Servisni zapisi</h2>
                     <div className="flex flex-wrap items-center gap-2">
-                        <button
-                            type="button"
-                            onClick={() => {
-                                const firstTask = Array.isArray(taskContext.tasks) ? taskContext.tasks[0] : null;
-                                if (!firstTask) return;
-                                setEditingTask(firstTask);
-                            }}
-                            disabled={!Array.isArray(taskContext.tasks) || taskContext.tasks.length === 0}
-                            className="rounded-lg border border-border-hairline px-4 py-2 text-sm font-semibold text-text-main hover:bg-canvas-deep disabled:opacity-60"
-                        >
-                            Uredi tablicu radnih sati
-                        </button>
-                        <button
-                            type="button"
-                            onClick={() => setEditingServiceReportNote(true)}
-                            disabled={!workOrderId}
-                            className="rounded-lg border border-border-hairline px-4 py-2 text-sm font-semibold text-text-main hover:bg-canvas-deep disabled:opacity-60"
-                        >
-                            Uredi tekst napomene
-                        </button>
                         <button
                             type="button"
                             onClick={() => downloadWorkOrderServiceRecordsPdf(workOrderId)}
                             disabled={!workOrderId}
                             className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"
                         >
-                            Preuzmi PDF servisnih zapisa
+                            Preuzmi PDF svih servisnih zapisa
                         </button>
                         <button
                             type="button"
@@ -374,7 +358,7 @@ export default function WorkOrderInvoicesPdfPage() {
                             disabled={!workOrderId}
                             className="rounded-lg border border-border-hairline px-4 py-2 text-sm font-semibold text-text-main hover:bg-canvas-deep disabled:opacity-60"
                         >
-                            Preuzmi DOCX servisnih zapisa
+                            Preuzmi DOCX svih servisnih zapisa
                         </button>
                     </div>
                 </div>
@@ -386,13 +370,52 @@ export default function WorkOrderInvoicesPdfPage() {
                     <div className="space-y-4">
                         {taskContext.tasks.map((task) => (
                             <article key={task.id} className="rounded-lg border border-border-hairline bg-canvas-base p-3">
-                                <div className="space-y-1 text-sm text-text-main">
-                                    <div><span className="font-semibold">Radni zadatak:</span> {task.title || '-'}</div>
-                                    <div><span className="font-semibold">Status:</span> {task.status || '-'}</div>
-                                    <div><span className="font-semibold">Dodijeljeno:</span> {task.assigned_to_name || '-'}</div>
-                                    <div><span className="font-semibold">Dizalica:</span> {task.vehicle_registration || '-'}</div>
+                                <div className="mb-3 flex flex-wrap items-start justify-between gap-2">
+                                    <div className="space-y-1 text-sm text-text-main">
+                                        <div><span className="font-semibold">Radni zadatak:</span> {task.title || '-'}</div>
+                                        <div><span className="font-semibold">Status:</span> {task.status || '-'}</div>
+                                        <div><span className="font-semibold">Dodijeljeno:</span> {task.assigned_to_name || '-'}</div>
+                                        <div><span className="font-semibold">Dizalica:</span> {task.vehicle_registration || '-'}</div>
+                                        {task.service_report_note && (
+                                            <div className="mt-1 rounded bg-canvas-deep px-2 py-1 text-xs text-text-muted">
+                                                <span className="font-semibold">Napomena:</span> {task.service_report_note}
+                                            </div>
+                                        )}
+                                    </div>
+                                    <div className="flex flex-wrap gap-2">
+                                        <button
+                                            type="button"
+                                            onClick={() => setEditingTask(task)}
+                                            className="rounded-lg border border-border-hairline px-3 py-1.5 text-xs font-semibold text-text-main hover:bg-canvas-deep"
+                                        >
+                                            Uredi tablicu radnih sati
+                                        </button>
+                                        <button
+                                            type="button"
+                                            onClick={() => { setTaskNoteError(''); setEditingTaskNote(task); }}
+                                            className="rounded-lg border border-border-hairline px-3 py-1.5 text-xs font-semibold text-text-main hover:bg-canvas-deep"
+                                        >
+                                            Uredi tekst napomene
+                                        </button>
+                                        <button
+                                            type="button"
+                                            onClick={() => downloadWorkOrderServiceRecordsPdf(workOrderId, task.id)}
+                                            disabled={!workOrderId || !task.id}
+                                            className="rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"
+                                        >
+                                            PDF za ovaj task
+                                        </button>
+                                        <button
+                                            type="button"
+                                            onClick={() => downloadWorkOrderServiceRecordsDocx(workOrderId, task.id)}
+                                            disabled={!workOrderId || !task.id}
+                                            className="rounded-lg border border-border-hairline px-3 py-1.5 text-xs font-semibold text-text-main hover:bg-canvas-deep disabled:opacity-60"
+                                        >
+                                            DOCX za ovaj task
+                                        </button>
+                                    </div>
                                 </div>
-                                <div className="mt-3 space-y-3">
+                                <div className="space-y-3">
                                     {!Array.isArray(task.service_records) || task.service_records.length === 0 ? (
                                         <p className="text-xs text-text-muted">Nema povezanih servisnih zapisa.</p>
                                     ) : (
@@ -517,6 +540,7 @@ export default function WorkOrderInvoicesPdfPage() {
             <TaskWorkHoursTableModal
                 open={!!editingTask}
                 task={editingTask}
+                workOrder={workOrder}
                 defaultLocation={workOrder?.location || ''}
                 saving={savingWorkHours}
                 onClose={() => setEditingTask(null)}
@@ -531,15 +555,15 @@ export default function WorkOrderInvoicesPdfPage() {
                 onSave={handleSaveAdditionalCostsTable}
             />
             <WorkOrderServiceNotesModal
-                open={editingServiceReportNote}
-                workOrder={workOrder}
-                saving={savingServiceReportNote}
-                error={serviceReportNoteError}
+                open={!!editingTaskNote}
+                task={editingTaskNote}
+                saving={savingTaskNote}
+                error={taskNoteError}
                 onClose={() => {
-                    setEditingServiceReportNote(false);
-                    setServiceReportNoteError('');
+                    setEditingTaskNote(null);
+                    setTaskNoteError('');
                 }}
-                onSave={handleSaveServiceReportNote}
+                onSave={handleSaveTaskServiceReportNote}
             />
             {invoiceDetailModal && (
                 <InvoiceDetailModal

frontend/src/components/dashboard/WorkOrderServiceNotesModal.jsx

@@ -3,7 +3,7 @@ import ModalShell from '../ui/ModalShell';
 
 export default function WorkOrderServiceNotesModal({
     open,
-    workOrder,
+    task,
     saving = false,
     error = '',
     onClose,
@@ -16,8 +16,8 @@ export default function WorkOrderServiceNotesModal({
             setNotes('');
             return;
         }
-        setNotes(String(workOrder?.notes || ''));
-    }, [open, workOrder?.id, workOrder?.notes]);
+        setNotes(String(task?.service_report_note || ''));
+    }, [open, task?.id, task?.service_report_note]);
 
     if (!open) return null;
 
@@ -37,7 +37,9 @@ export default function WorkOrderServiceNotesModal({
                     <div>
                         <h3 className="text-base font-semibold text-text-main">UREDI TEKST NAPOMENE</h3>
                         <p className="text-xs text-text-muted">
-                            Tekst se prikazuje u PDF-u "Izvještaj servisera" na prvoj stranici.
+                            {task?.title
+                                ? `Zadatak: ${task.title}`
+                                : 'Tekst se prikazuje u PDF-u "Izvještaj servisera".'}
                         </p>
                     </div>
                     <button
@@ -56,11 +58,11 @@ export default function WorkOrderServiceNotesModal({
                             {error}
                         </div>
                     ) : null}
-                    <label htmlFor="work-order-notes" className="text-sm font-medium text-text-main">
+                    <label htmlFor="task-service-report-note" className="text-sm font-medium text-text-main">
                         Napomena
                     </label>
                     <textarea
-                        id="work-order-notes"
+                        id="task-service-report-note"
                         value={notes}
                         onInput={(event) => setNotes(event.currentTarget.value)}
                         rows={8}

frontend/src/stores/fleetDashboardStore.js

@@ -771,6 +771,17 @@ export async function updateTaskWorkHoursTable(taskId, data) {
     return payload;
 }
 
+export async function updateTaskServiceReportNote(taskId, note) {
+    if (!taskId) {
+        throw new Error('Task ID je obavezan.');
+    }
+    const payload = await api.patch(`tasks/tasks/${encodeURIComponent(taskId)}/`, {
+        service_report_note: String(note ?? ''),
+    });
+    showToast('Napomena servisnog izvještaja je uspješno spremljena.', 'success');
+    return payload;
+}
+
 export async function createWorkOrderInvoice(workOrderId, data = {}, signal = null) {
     if (!workOrderId) {
         throw new Error('Work order ID je obavezan.');
@@ -854,10 +865,25 @@ export async function downloadWorkOrderInvoicesPdf(workOrderId) {
     return payload;
 }
 
-export async function downloadWorkOrderServiceRecordsPdf(workOrderId) {
+export async function downloadWorkOrderServiceRecordsPdf(workOrderId, taskId = null) {
     if (!workOrderId) {
         throw new Error('Work order ID je obavezan.');
     }
+    if (taskId) {
+        try {
+            const blob = await api.get(
+                `fleet/work-orders/${encodeURIComponent(workOrderId)}/service-records-pdf/?task_id=${encodeURIComponent(taskId)}`,
+                { responseType: 'blob' },
+            );
+            saveBlobToFile(blob, `${workOrderId}.task-${taskId}.work-order-service-records.pdf`);
+            showToast('PDF servisnih zapisa za odabrani task je preuzet.', 'success');
+            return;
+        } catch (err) {
+            const msg = err?.message || 'Preuzimanje PDF-a servisnih zapisa za task nije uspjelo.';
+            showToast(msg, 'error');
+            throw err;
+        }
+    }
     showToast('Kreiran je zahtjev za PDF servisnih zapisa putnog naloga.', 'info');
     const payload = await api.post(`fleet/work-orders/${encodeURIComponent(workOrderId)}/service-records-pdf-request/`, {});
     if (payload?.status === 'ready' && payload?.download_url) {
@@ -886,14 +912,23 @@ export async function downloadWorkOrderDocx(workOrderId) {
     }
 }
 
-export async function downloadWorkOrderServiceRecordsDocx(workOrderId) {
+export async function downloadWorkOrderServiceRecordsDocx(workOrderId, taskId = null) {
     if (!workOrderId) {
         throw new Error('Work order ID je obavezan.');
     }
+    const query = taskId ? `?task_id=${encodeURIComponent(taskId)}` : '';
     try {
-        const blob = await api.get(`fleet/work-orders/${encodeURIComponent(workOrderId)}/service-records-docx/`, { responseType: 'blob' });
-        saveBlobToFile(blob, `${workOrderId}.work-order-service-records.docx`);
-        showToast('DOCX servisnih zapisa je preuzet.', 'success');
+        const blob = await api.get(
+            `fleet/work-orders/${encodeURIComponent(workOrderId)}/service-records-docx/${query}`,
+            { responseType: 'blob' },
+        );
+        if (taskId) {
+            saveBlobToFile(blob, `${workOrderId}.task-${taskId}.work-order-service-records.docx`);
+            showToast('DOCX servisnih zapisa za odabrani task je preuzet.', 'success');
+        } else {
+            saveBlobToFile(blob, `${workOrderId}.work-order-service-records.docx`);
+            showToast('DOCX servisnih zapisa je preuzet.', 'success');
+        }
     } catch (err) {
         const msg = err?.message || 'Preuzimanje DOCX servisnih zapisa nije uspjelo.';
         showToast(msg, 'error');