interaktivna Tablica radnih sati, db

frontend/src/components/dashboard/WorkOrderInvoicesPdfPage.jsx

@@ -7,11 +7,13 @@ import {
     fetchWorkOrderById,
     fetchWorkOrderInvoices,
     fetchWorkOrderTaskServiceContext,
+    updateTaskWorkHoursTable,
 } from '../../stores/fleetDashboardStore';
 import { $accessToken, $authReady, hydrateAuthFromStorage } from '../../stores/authStore';
 import { fetchNotifications, connectNotifications } from '../../stores/notificationStore';
 import { formatEntityCode } from '../../lib/displayIds';
 import { resolveMediaUrl, useAuthenticatedMediaSources } from './WorkOrderImageCarousel';
+import TaskWorkHoursTableModal from './TaskWorkHoursTableModal';
 
 function readWorkOrderIdFromQuery() {
     if (typeof window === 'undefined') {
@@ -53,6 +55,8 @@ export default function WorkOrderInvoicesPdfPage() {
     const [taskContext, setTaskContext] = useState({ tasks: [] });
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState('');
+    const [editingTask, setEditingTask] = useState(null);
+    const [savingWorkHours, setSavingWorkHours] = useState(false);
 
     useEffect(() => {
         hydrateAuthFromStorage();
@@ -149,6 +153,25 @@ export default function WorkOrderInvoicesPdfPage() {
 
     const { getAuthenticatedMediaSrc } = useAuthenticatedMediaSources(mediaPaths);
 
+    const handleSaveWorkHoursTable = async (tableData) => {
+        if (!editingTask?.id) return;
+        setSavingWorkHours(true);
+        try {
+            const response = await updateTaskWorkHoursTable(editingTask.id, tableData);
+            setTaskContext((prev) => ({
+                ...prev,
+                tasks: (Array.isArray(prev.tasks) ? prev.tasks : []).map((task) => (
+                    String(task.id) === String(editingTask.id)
+                        ? { ...task, work_hours_table: response?.data ?? null }
+                        : task
+                )),
+            }));
+            setEditingTask(null);
+        } finally {
+            setSavingWorkHours(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">
@@ -196,6 +219,15 @@ export default function WorkOrderInvoicesPdfPage() {
                                     <div><span className="font-semibold">Dodijeljeno:</span> {task.assigned_to_name || '-'}</div>
                                     <div><span className="font-semibold">Dizalica:</span> {task.vehicle_registration || '-'}</div>
                                 </div>
+                                <div className="mt-2">
+                                    <button
+                                        type="button"
+                                        onClick={() => setEditingTask(task)}
+                                        className="rounded-md border border-border-hairline px-3 py-1.5 text-xs font-medium text-text-main hover:bg-canvas-deep"
+                                    >
+                                        Uredi tablicu radnih sati
+                                    </button>
+                                </div>
                                 <div className="mt-3 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>
@@ -281,6 +313,14 @@ export default function WorkOrderInvoicesPdfPage() {
                     </div>
                 )}
             </div>
+            <TaskWorkHoursTableModal
+                open={!!editingTask}
+                task={editingTask}
+                defaultLocation={workOrder?.location || ''}
+                saving={savingWorkHours}
+                onClose={() => setEditingTask(null)}
+                onSave={handleSaveWorkHoursTable}
+            />
         </section>
     );
 }