feat: dodaj scheduled_date na Task i kalendar widget

- Novo polje Task.scheduled_date (DateField, nullable, db_index) za planiranje
- Migracija 0009_task_scheduled_date
- Celery task notify_upcoming_tasks: dnevno u 08:00 šalje Pusher + email za sutrašnje zadatke
- TaskCalendarWidget: react-spring slide panel s lijeve strane, grid prikaz mjeseca, dot indikatori, klik otvara TaskServiceRecordsModal
- FleetDashboardShell: import + render kalendara, Planirano stupac u tablici zadataka
- TaskCreateModal + TaskServiceRecordsModal: scheduled_date input i prikaz
- Admin + serializer + views: scheduled_date filter i prikaz
- 47 backend testova prolaze (uključuje 8 novih za notify_upcoming_tasks)

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

backend/core/settings/base.py

@@ -175,6 +175,10 @@ CELERY_BEAT_SCHEDULE = {
         'task': 'modules.fleet.tasks.cleanup_expired_generated_pdfs_task',
         'schedule': crontab(minute=0),
     },
+    'notify-upcoming-tasks-daily': {
+        'task': 'modules.task_management.tasks.notify_upcoming_tasks',
+        'schedule': crontab(hour=8, minute=0),
+    },
 }
 
 # URL kojim će preglednik dohvaćati statiku

backend/modules/fleet/models.py

@@ -250,6 +250,7 @@ class WorkOrder(BaseModel):
         ('defektaza', _("Defektaža")),
         ('kontrola', _("Kontrola")),
         ('redovni_pregled', _("Redovni pregled")),
+        ('popravak', _("Popravak")),
     ]
 
     vehicle = models.ForeignKey(Vehicle, on_delete=models.PROTECT, related_name='work_orders', verbose_name=_("Vozilo"))

backend/modules/task_management/admin.py

@@ -26,8 +26,8 @@ class TaskTemplateEntryInline(admin.TabularInline):
 
 @admin.register(Task)
 class TaskAdmin(admin.ModelAdmin):
-    list_display = ('title', 'status', 'assigned_to', 'vehicle', 'work_order', 'created_at')
+    list_display = ('title', 'status', 'scheduled_date', 'assigned_to', 'vehicle', 'work_order', 'created_at')
-    list_filter = ('status', 'created_at', 'work_order')
+    list_filter = ('status', 'scheduled_date', 'created_at', 'work_order')
     search_fields = ('title', 'description', 'work_order__id', 'work_order__vehicle__registration_number')
     readonly_fields = ('id', 'created_at', 'updated_at')
     inlines = (TaskWorkHoursTableInline, TaskWorkEntryInline)

backend/modules/task_management/migrations/0009_task_scheduled_date.py

@@ -0,0 +1,22 @@
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('task_management', '0008_task_add_ready_for_completion_status'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='task',
+            name='scheduled_date',
+            field=models.DateField(
+                null=True,
+                blank=True,
+                db_index=True,
+                verbose_name='Planirani datum izvršenja',
+                help_text='Datum kada je planirano izvršenje radnog zadatka.',
+            ),
+        ),
+    ]

backend/modules/task_management/models.py

@@ -47,6 +47,13 @@ class Task(BaseModel):
         related_name='work_order_tasks',
         verbose_name=_("Putni nalog"),
     )
+    scheduled_date = models.DateField(
+        null=True,
+        blank=True,
+        db_index=True,
+        verbose_name=_("Planirani datum izvršenja"),
+        help_text=_("Datum kada je planirano izvršenje radnog zadatka."),
+    )
 
     class Meta:
         ordering = ['-created_at']

backend/modules/task_management/serializers.py

@@ -96,6 +96,7 @@ class TaskSerializer(serializers.ModelSerializer):
             'assigned_to', 'assigned_to_name',
             'vehicle', 'vehicle_registration',
             'work_order', 'work_order_label',
+            'scheduled_date',
             'template_id', 'auto_close_work_order',
             'created_at',
         ]
@@ -106,6 +107,7 @@ class TaskSerializer(serializers.ModelSerializer):
             'status': {'required': False},
             'work_order': {'required': False, 'allow_null': True},
             'vehicle': {'required': False, 'allow_null': True},
+            'scheduled_date': {'required': False, 'allow_null': True},
         }
 
     def validate_title(self, value):

backend/modules/task_management/tasks.py

@@ -1,10 +1,64 @@
 # backend/modules/task_management/tasks.py
 
+import logging
 from celery import shared_task
 from .models import Task
 from django.contrib.auth import get_user_model
 from modules.fleet.models import Vehicle, WorkOrder
 
+logger = logging.getLogger(__name__)
+
+
+@shared_task
+def notify_upcoming_tasks():
+    """
+    Dnevna Celery periodik task koji šalje Pusher + email notifikacije
+    za radne zadatke čiji je planirani datum izvršenja sutra.
+    """
+    from datetime import date, timedelta
+    from modules.fleet.services import NotificationService
+
+    tomorrow = date.today() + timedelta(days=1)
+    upcoming = Task.objects.filter(
+        is_active=True,
+        scheduled_date=tomorrow,
+        status__in=('aktivan', 'servis'),
+    ).select_related('assigned_to', 'vehicle')
+
+    notified = 0
+    for task in upcoming:
+        recipient = task.assigned_to
+        if not recipient:
+            continue
+        vehicle_label = (
+            task.vehicle.registration_number if task.vehicle else 'nepoznato'
+        )
+        try:
+            NotificationService.create_notification(
+                recipient=recipient,
+                title=f"Sutra planirani zadatak: {task.title}",
+                message=(
+                    f"Radni zadatak '{task.title}' na dizalici {vehicle_label} "
+                    f"je planiran za sutra ({tomorrow.strftime('%d.%m.%Y')})."
+                ),
+                level="info",
+                send_email=True,
+                metadata={
+                    "entity_type": "task",
+                    "task_id": str(task.id),
+                    "vehicle_id": str(task.vehicle_id) if task.vehicle_id else None,
+                    "section": "dashboard",
+                    "scheduled_date": tomorrow.isoformat(),
+                },
+            )
+            notified += 1
+        except Exception:
+            logger.exception("Greška pri slanju notifikacije za task %s", task.id)
+
+    logger.info("notify_upcoming_tasks: obaviješteno %d servisera za datum %s", notified, tomorrow)
+    return {"notified": notified, "date": tomorrow.isoformat()}
+
+
 @shared_task
 def create_task_from_invoice(invoice_data):
     """
@@ -25,7 +79,7 @@ def create_task_from_invoice(invoice_data):
             vehicle = work_order.vehicle
     if vehicle is None and vehicle_id:
         vehicle = Vehicle.objects.filter(pk=vehicle_id).first()
-    
+
     if amount > 1000:
         Task.objects.create(
             title=f"Provjera računa: {invoice_data['invoice_number']}",
@@ -34,4 +88,4 @@ def create_task_from_invoice(invoice_data):
             status='aktivan',
             vehicle=vehicle,
             work_order=work_order,
-        )
+        )

backend/modules/task_management/tests/test_models.py

@@ -1,5 +1,6 @@
 from django.test import TestCase
 from django.contrib.auth import get_user_model
+import datetime
 
 from modules.task_management.models import Task
 
@@ -9,4 +10,25 @@ class TaskModelTests(TestCase):
         user = get_user_model().objects.create_user(username="u1", email="u1@example.test", password="pass")
         task = Task.objects.create(title="My Task", description="Desc", assigned_to=user)
         assert str(task).startswith("My Task")
-        assert "aktivan" in str(task) or "(" in str(task)  # basic sanity
+        assert "aktivan" in str(task) or "(" in str(task)
+
+    def test_scheduled_date_defaults_to_null(self):
+        user = get_user_model().objects.create_user(username="u2", email="u2@example.test", password="pass")
+        task = Task.objects.create(title="Task bez datuma", assigned_to=user)
+        assert task.scheduled_date is None
+
+    def test_scheduled_date_is_saved_and_retrieved(self):
+        user = get_user_model().objects.create_user(username="u3", email="u3@example.test", password="pass")
+        target = datetime.date(2026, 8, 15)
+        task = Task.objects.create(title="Planirani task", assigned_to=user, scheduled_date=target)
+        task.refresh_from_db()
+        assert task.scheduled_date == target
+
+    def test_scheduled_date_can_be_updated_to_null(self):
+        user = get_user_model().objects.create_user(username="u4", email="u4@example.test", password="pass")
+        target = datetime.date(2026, 8, 15)
+        task = Task.objects.create(title="Task s datumom", assigned_to=user, scheduled_date=target)
+        task.scheduled_date = None
+        task.save()
+        task.refresh_from_db()
+        assert task.scheduled_date is None

backend/modules/task_management/tests/test_serializers.py

@@ -43,4 +43,41 @@ class TaskSerializerTests(TestCase):
         task = Task.objects.create(title="Task 4", description="", status="servis", assigned_to=self.user, vehicle=self.vehicle)
 
         serializer = TaskSerializer(instance=task, data={"status": "zavrsen", "work_order": str(work_order.id)}, partial=True)
-        assert serializer.is_valid(), serializer.errors
+        assert serializer.is_valid(), serializer.errors
+
+    def test_scheduled_date_is_optional_on_create(self):
+        serializer = TaskSerializer(data={"title": "Task planned", "status": "aktivan", "vehicle": str(self.vehicle.id)})
+        assert serializer.is_valid(), serializer.errors
+        assert 'scheduled_date' not in serializer.errors
+
+    def test_scheduled_date_is_included_in_serialized_output(self):
+        import datetime
+        task = Task.objects.create(
+            title="Task with date",
+            assigned_to=self.user,
+            vehicle=self.vehicle,
+            scheduled_date=datetime.date(2026, 9, 1),
+        )
+        serializer = TaskSerializer(instance=task)
+        assert 'scheduled_date' in serializer.data
+        assert str(serializer.data['scheduled_date']) == '2026-09-01'
+
+    def test_scheduled_date_can_be_null_in_serialized_output(self):
+        task = Task.objects.create(title="Task no date", assigned_to=self.user, vehicle=self.vehicle)
+        serializer = TaskSerializer(instance=task)
+        assert serializer.data['scheduled_date'] is None
+
+    def test_scheduled_date_accepts_valid_date(self):
+        serializer = TaskSerializer(
+            data={"title": "Task mit datum", "status": "aktivan",
+                  "vehicle": str(self.vehicle.id), "scheduled_date": "2026-12-25"}
+        )
+        assert serializer.is_valid(), serializer.errors
+
+    def test_scheduled_date_rejects_invalid_date_string(self):
+        serializer = TaskSerializer(
+            data={"title": "Task bad date", "status": "aktivan",
+                  "vehicle": str(self.vehicle.id), "scheduled_date": "not-a-date"}
+        )
+        assert not serializer.is_valid()
+        assert 'scheduled_date' in serializer.errors

backend/modules/task_management/tests/test_upcoming_notifications.py

@@ -0,0 +1,133 @@
+import datetime
+from unittest.mock import patch
+from django.test import TestCase
+from django.contrib.auth import get_user_model
+from modules.task_management.tasks import notify_upcoming_tasks
+from modules.task_management.models import Task
+from modules.fleet.models import Vehicle, WorkOrder
+
+
+class NotifyUpcomingTasksTests(TestCase):
+    def setUp(self):
+        User = get_user_model()
+        self.user = User.objects.create_user(
+            username="serviser-notif",
+            email="serviser@example.test",
+            password="pass",
+        )
+        self.vehicle = Vehicle.objects.create(
+            registration_number="ZG-NOTIF-01",
+            asset_type='crane',
+        )
+
+    @patch('modules.fleet.services.NotificationService.create_notification')
+    def test_notifies_for_task_scheduled_tomorrow(self, mock_notify):
+        tomorrow = datetime.date.today() + datetime.timedelta(days=1)
+        Task.objects.create(
+            title="Sutrašnji zadatak",
+            assigned_to=self.user,
+            vehicle=self.vehicle,
+            status='aktivan',
+            scheduled_date=tomorrow,
+        )
+        result = notify_upcoming_tasks()
+        self.assertEqual(result['notified'], 1)
+        mock_notify.assert_called_once()
+        call_kwargs = mock_notify.call_args.kwargs
+        self.assertEqual(call_kwargs['recipient'], self.user)
+        self.assertIn('Sutrašnji zadatak', call_kwargs['title'])
+        self.assertEqual(call_kwargs['level'], 'info')
+        self.assertTrue(call_kwargs.get('send_email'))
+
+    @patch('modules.fleet.services.NotificationService.create_notification')
+    def test_notifies_multiple_upcoming_tasks(self, mock_notify):
+        tomorrow = datetime.date.today() + datetime.timedelta(days=1)
+        Task.objects.create(title="Task A", assigned_to=self.user, vehicle=self.vehicle,
+                            status='aktivan', scheduled_date=tomorrow)
+        Task.objects.create(title="Task B", assigned_to=self.user, vehicle=self.vehicle,
+                            status='servis', scheduled_date=tomorrow)
+        result = notify_upcoming_tasks()
+        self.assertEqual(result['notified'], 2)
+        self.assertEqual(mock_notify.call_count, 2)
+
+    @patch('modules.fleet.services.NotificationService.create_notification')
+    def test_skips_task_without_scheduled_date(self, mock_notify):
+        Task.objects.create(
+            title="Bez datuma", assigned_to=self.user, vehicle=self.vehicle,
+            status='aktivan', scheduled_date=None,
+        )
+        result = notify_upcoming_tasks()
+        self.assertEqual(result['notified'], 0)
+        mock_notify.assert_not_called()
+
+    @patch('modules.fleet.services.NotificationService.create_notification')
+    def test_skips_task_scheduled_today(self, mock_notify):
+        today = datetime.date.today()
+        Task.objects.create(
+            title="Danas", assigned_to=self.user, vehicle=self.vehicle,
+            status='aktivan', scheduled_date=today,
+        )
+        result = notify_upcoming_tasks()
+        self.assertEqual(result['notified'], 0)
+        mock_notify.assert_not_called()
+
+    @patch('modules.fleet.services.NotificationService.create_notification')
+    def test_skips_task_scheduled_in_past(self, mock_notify):
+        yesterday = datetime.date.today() - datetime.timedelta(days=1)
+        Task.objects.create(
+            title="Jučer", assigned_to=self.user, vehicle=self.vehicle,
+            status='aktivan', scheduled_date=yesterday,
+        )
+        result = notify_upcoming_tasks()
+        self.assertEqual(result['notified'], 0)
+        mock_notify.assert_not_called()
+
+    @patch('modules.fleet.services.NotificationService.create_notification')
+    def test_skips_finished_task(self, mock_notify):
+        tomorrow = datetime.date.today() + datetime.timedelta(days=1)
+        vehicle2 = Vehicle.objects.create(registration_number="ZG-NOTIF-02", asset_type='crane')
+        work_order = WorkOrder.objects.create(
+            vehicle=vehicle2, creator=self.user, purpose='defektaza',
+            status='closed', start_mileage=100, end_mileage=200,
+        )
+        Task.objects.create(
+            title="Završeni", assigned_to=self.user, vehicle=vehicle2,
+            status='zavrsen', scheduled_date=tomorrow, work_order=work_order,
+        )
+        result = notify_upcoming_tasks()
+        self.assertEqual(result['notified'], 0)
+        mock_notify.assert_not_called()
+
+    @patch('modules.fleet.services.NotificationService.create_notification')
+    def test_skips_cancelled_task(self, mock_notify):
+        tomorrow = datetime.date.today() + datetime.timedelta(days=1)
+        vehicle3 = Vehicle.objects.create(registration_number="ZG-NOTIF-03", asset_type='crane')
+        work_order = WorkOrder.objects.create(
+            vehicle=vehicle3, creator=self.user, purpose='kontrola',
+            status='closed', start_mileage=50, end_mileage=100,
+        )
+        Task.objects.create(
+            title="Otkazani", assigned_to=self.user, vehicle=vehicle3,
+            status='neaktivan', scheduled_date=tomorrow, work_order=work_order,
+        )
+        result = notify_upcoming_tasks()
+        self.assertEqual(result['notified'], 0)
+        mock_notify.assert_not_called()
+
+    @patch('modules.fleet.services.NotificationService.create_notification')
+    def test_skips_task_without_assigned_user(self, mock_notify):
+        tomorrow = datetime.date.today() + datetime.timedelta(days=1)
+        Task.objects.create(
+            title="Bez servisera", assigned_to=None, vehicle=self.vehicle,
+            status='aktivan', scheduled_date=tomorrow,
+        )
+        result = notify_upcoming_tasks()
+        self.assertEqual(result['notified'], 0)
+        mock_notify.assert_not_called()
+
+    @patch('modules.fleet.services.NotificationService.create_notification')
+    def test_result_includes_date_string(self, mock_notify):
+        result = notify_upcoming_tasks()
+        tomorrow = datetime.date.today() + datetime.timedelta(days=1)
+        self.assertEqual(result['date'], tomorrow.isoformat())
+        self.assertEqual(result['notified'], 0)

backend/modules/task_management/views.py

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

frontend/src/components/dashboard/FleetDashboardShell.jsx

@@ -6,6 +6,7 @@ import WorkOrderModal from './WorkOrderModal';
 import TaskCreateModal from './TaskCreateModal';
 import TaskServiceRecordsModal from './TaskServiceRecordsModal';
 import WorkOrderDetailModal from './WorkOrderDetailModal';
+import TaskCalendarWidget from './TaskCalendarWidget';
 import SyncLogPanel from './SyncLogPanel';
 import ServiceRecordForm from '../fleet/ServiceRecordForm';
 import ServicePhotoUpload from '../fleet/ServicePhotoUpload';
@@ -578,6 +579,7 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
     const taskColumns = [
         { key: 'title', label: 'Radni zadatak', className: 'px-4 py-3' },
         { key: 'status', label: 'Status', className: 'px-4 py-3' },
+        { key: 'scheduledDate', label: 'Planirano', className: 'px-4 py-3' },
         { key: 'createdAt', label: 'Vrijeme izrade', className: 'px-4 py-3' },
         { key: 'vehicle', label: 'Dizalica', className: 'px-4 py-3' },
         { key: 'workOrder', label: 'Putni nalog', className: 'px-4 py-3' },
@@ -591,6 +593,12 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
 
     return (
         <AnimatedPage className="min-h-screen">
+            {hasMounted && (
+                <TaskCalendarWidget
+                    tasks={tasks}
+                    onTaskClick={(task) => setSelectedTask(task)}
+                />
+            )}
             <main className="min-w-0">
                 <DashboardTopbar
                     activeSection={activeSection}
@@ -750,6 +758,15 @@ export default function FleetDashboardShell({ initialSection = 'dashboard', page
                                                 {getStatusLabel(task.status || '-')}
                                             </span>
                                         </td>
+                                        <td className="px-4 py-3">
+                                            {task.scheduled_date ? (
+                                                <span className="font-medium text-indigo-700">
+                                                    {formatDate(task.scheduled_date)}
+                                                </span>
+                                            ) : (
+                                                <span className="text-text-muted">-</span>
+                                            )}
+                                        </td>
                                         <td
                                             className="px-4 py-3"
                                             title={formatDateTime(task.created_at) !== '-' ? formatDateTime(task.created_at) : undefined}

frontend/src/components/dashboard/TaskCalendarWidget.jsx

@@ -0,0 +1,267 @@
+import { useMemo, useState } from 'preact/hooks';
+import { animated, useSpring } from '@react-spring/web';
+import { getStatusLabel } from '../../stores/taskStore';
+
+const WEEKDAY_LABELS = ['Po', 'Ut', 'Sr', 'Če', 'Pe', 'Su', 'Ne'];
+const MONTH_NAMES = [
+    'Siječanj', 'Veljača', 'Ožujak', 'Travanj', 'Svibanj', 'Lipanj',
+    'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac',
+];
+const PANEL_WIDTH = 300;
+
+function toIsoDateKey(dateStr) {
+    if (!dateStr) return null;
+    const d = new Date(dateStr);
+    if (Number.isNaN(d.getTime())) return null;
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+function formatDayLabel(year, month, day) {
+    return `${String(day).padStart(2, '0')}.${String(month + 1).padStart(2, '0')}.${year}`;
+}
+
+export default function TaskCalendarWidget({ tasks = [], onTaskClick }) {
+    const [open, setOpen] = useState(false);
+    const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
+    const [viewMonth, setViewMonth] = useState(() => new Date().getMonth());
+    const [selectedDay, setSelectedDay] = useState(null);
+
+    const panelSpring = useSpring({
+        transform: open ? 'translate3d(0%,0,0)' : `translate3d(-100%,0,0)`,
+        config: { tension: 260, friction: 28 },
+    });
+
+    const buttonSpring = useSpring({
+        left: open ? PANEL_WIDTH : 0,
+        config: { tension: 260, friction: 28 },
+    });
+
+    // Map: "YYYY-MM-DD" -> task[]
+    const tasksByDate = useMemo(() => {
+        const map = {};
+        for (const task of tasks) {
+            const key = toIsoDateKey(task.scheduled_date);
+            if (!key) continue;
+            if (!map[key]) map[key] = [];
+            map[key].push(task);
+        }
+        return map;
+    }, [tasks]);
+
+    // 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
+        const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+        const cells = [];
+        for (let i = 0; i < startDow; i++) cells.push(null);
+        for (let d = 1; d <= daysInMonth; d++) cells.push(d);
+        return cells;
+    }, [viewYear, viewMonth]);
+
+    const selectedDayKey = selectedDay
+        ? `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(selectedDay).padStart(2, '0')}`
+        : null;
+    const selectedDayTasks = selectedDayKey ? (tasksByDate[selectedDayKey] ?? []) : [];
+    const today = new Date();
+
+    function prevMonth() {
+        setSelectedDay(null);
+        if (viewMonth === 0) { setViewYear((y) => y - 1); setViewMonth(11); }
+        else setViewMonth((m) => m - 1);
+    }
+    function nextMonth() {
+        setSelectedDay(null);
+        if (viewMonth === 11) { setViewYear((y) => y + 1); setViewMonth(0); }
+        else setViewMonth((m) => m + 1);
+    }
+
+    function handleDayClick(day) {
+        setSelectedDay((prev) => (prev === day ? null : day));
+    }
+
+    function handleTaskClick(task) {
+        onTaskClick?.(task);
+        setOpen(false);
+    }
+
+    const totalScheduled = Object.values(tasksByDate).flat().length;
+
+    return (
+        <>
+            {/* Backdrop */}
+            {open && (
+                <div
+                    role="presentation"
+                    className="fixed inset-0 z-[45] bg-black/20 backdrop-blur-[1px]"
+                    onClick={() => setOpen(false)}
+                />
+            )}
+
+            {/* Sliding panel */}
+            <animated.div
+                style={{ ...panelSpring, width: `${PANEL_WIDTH}px` }}
+                className="fixed left-0 top-0 z-[46] flex h-screen flex-col overflow-hidden border-r border-border-hairline bg-canvas-elevated shadow-2xl"
+            >
+                {/* Header */}
+                <div className="flex items-center justify-between border-b border-border-hairline px-4 py-3">
+                    <h2 className="text-sm font-semibold text-text-main">📅 Kalendar zadataka</h2>
+                    <button
+                        type="button"
+                        onClick={() => setOpen(false)}
+                        className="rounded-md p-1 text-text-muted hover:bg-canvas-deep"
+                        aria-label="Zatvori kalendar"
+                    >
+                        ✕
+                    </button>
+                </div>
+
+                {/* 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 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 taskCount = tasksByDate[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 ? `${taskCount} zadatak/a` : 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 && (
+                                        <span
+                                            className={[
+                                                'absolute bottom-0.5 left-1/2 h-1.5 w-1.5 -translate-x-1/2 rounded-full',
+                                                isSelected ? 'bg-white' : 'bg-indigo-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 ? (
+                                <p className="text-sm text-text-muted">Nema zadataka za odabrani datum.</p>
+                            ) : (
+                                <ul className="space-y-1.5">
+                                    {selectedDayTasks.map((task) => (
+                                        <li key={task.id}>
+                                            <button
+                                                type="button"
+                                                onClick={() => handleTaskClick(task)}
+                                                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>
+                                            </button>
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                        </>
+                    ) : (
+                        <>
+                            <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>
+                            )}
+                            {totalScheduled === 0 && (
+                                <p className="mt-1.5 text-[11px] text-text-muted">
+                                    Nijedan zadatak nema postavljen planirani datum.
+                                </p>
+                            )}
+                        </>
+                    )}
+                </div>
+            </animated.div>
+
+            {/* Toggle tab button — slides right as panel opens */}
+            <animated.button
+                type="button"
+                style={{ left: buttonSpring.left.to((v) => `${v}px`) }}
+                onClick={() => setOpen((o) => !o)}
+                className="fixed top-1/2 z-[47] -translate-y-1/2 rounded-r-xl border border-l-0 border-border-hairline bg-canvas-elevated px-1.5 py-4 shadow-md hover:bg-indigo-50 focus:outline-none"
+                aria-label={open ? 'Zatvori kalendar' : 'Otvori kalendar'}
+                title="Kalendar zadataka"
+            >
+                <span
+                    style={{ writingMode: 'vertical-rl', textOrientation: 'mixed' }}
+                    className="select-none text-[11px] font-medium text-text-main"
+                >
+                    📅 Kalendar
+                </span>
+            </animated.button>
+        </>
+    );
+}

frontend/src/components/dashboard/TaskCreateModal.jsx

@@ -10,6 +10,7 @@ const INITIAL_FORM = {
     description: '',
     status: 'aktivan',
     work_order: '',
+    scheduled_date: '',
 };
 
 export default function TaskCreateModal({ open, workOrders = [], contextCrane = null, onClose, onSuccess }) {
@@ -50,6 +51,7 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
             description: selectedTemplate.description || '',
             status: 'aktivan',
             work_order: '',
+            // scheduled_date is kept so user can set it in template mode too
         }));
     }, [selectedTemplate]);
 
@@ -98,6 +100,7 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
                 template_id: templateId,
                 vehicle: contextCrane.id,
                 work_order: null,
+                scheduled_date: form.scheduled_date || null,
             };
         } else {
             const title = String(form.title || '').trim();
@@ -115,6 +118,7 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
                 status: form.status || 'aktivan',
                 vehicle: contextCrane.id,
                 work_order: form.work_order || null,
+                scheduled_date: form.scheduled_date || null,
             };
         }
 
@@ -231,6 +235,17 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
                         </label>
 
                         <label className="flex flex-col gap-1 text-sm">
+                            <span className="font-medium text-text-main">Planirani datum izvršenja</span>
+                            <input
+                                type="date"
+                                value={form.scheduled_date}
+                                onInput={(event) => setField('scheduled_date', event.currentTarget.value)}
+                                disabled={submitting}
+                                className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
+                            />
+                        </label>
+
+                        <label className="flex flex-col gap-1 text-sm sm:col-span-2">
                             <span className="font-medium text-text-main">Povezani putni nalog</span>
                             <select
                                 value={form.work_order}

frontend/src/components/dashboard/TaskServiceRecordsModal.jsx

@@ -47,6 +47,7 @@ export default function TaskServiceRecordsModal({
         title: '',
         description: '',
         status: 'aktivan',
+        scheduled_date: '',
     });
 
     useEffect(() => {
@@ -67,6 +68,7 @@ export default function TaskServiceRecordsModal({
             title: String(task.title || ''),
             description: String(task.description || ''),
             status: String(task.status || 'aktivan'),
+            scheduled_date: String(task.scheduled_date || ''),
         });
     }, [task?.id, task?.work_order]);
 
@@ -117,7 +119,8 @@ export default function TaskServiceRecordsModal({
                 title,
                 description,
                 status,
-            });
+                    scheduled_date: taskForm.scheduled_date || null,
+                });
             setShowTaskEditor(false);
         } catch (error) {
             const conflictCode = error?.details?.code;
@@ -130,6 +133,7 @@ export default function TaskServiceRecordsModal({
                             title,
                             description,
                             status,
+                            scheduled_date: taskForm.scheduled_date || null,
                             auto_close_work_order: true,
                         });
                         setShowTaskEditor(false);
@@ -215,6 +219,10 @@ export default function TaskServiceRecordsModal({
                                             <dt className="text-xs text-text-muted">Putni nalog</dt>
                                             <dd className="text-text-main">{task.work_order_label || '-'}</dd>
                                         </div>
+                                        <div>
+                                            <dt className="text-xs text-text-muted">Planirani datum</dt>
+                                            <dd className="text-text-main">{task.scheduled_date ? formatDate(task.scheduled_date) : '-'}</dd>
+                                        </div>
                                         <div>
                                             <dt className="text-xs text-text-muted">Vrijeme izrade</dt>
                                             <dd className="text-text-main">{formatDateTime(task.created_at)}</dd>
@@ -262,6 +270,16 @@ export default function TaskServiceRecordsModal({
                                                 ))}
                                             </select>
                                         </label>
+                                        <label className="flex flex-col gap-1 text-sm">
+                                            <span className="text-xs text-text-muted">Planirani datum izvršenja</span>
+                                            <input
+                                                type="date"
+                                                value={taskForm.scheduled_date || ''}
+                                                onInput={(event) => setTaskForm((prev) => ({ ...prev, scheduled_date: event.currentTarget.value }))}
+                                                disabled={updatingTask}
+                                                className="rounded-lg border border-border-hairline bg-canvas-elevated px-3 py-2 text-text-main disabled:opacity-60"
+                                            />
+                                        </label>
                                         {taskError ? (
                                             <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                                                 {taskError}
@@ -277,6 +295,7 @@ export default function TaskServiceRecordsModal({
                                                         title: String(task.title || ''),
                                                         description: String(task.description || ''),
                                                         status: String(task.status || 'aktivan'),
+                                                        scheduled_date: String(task.scheduled_date || ''),
                                                     });
                                                 }}
                                                 disabled={updatingTask}