feat: dodaj bilješke widget i admin kalendar/notifikacije

Uveden je novi Notes drawer s kalendar integracijom, zajednički DRY left-slide mehanizam te međusobno isključivo prikazivanje s Kalendar widgetom. Backend i frontend su prošireni za servisne bilješke (uključujući slanje na više servisera), dodan je users/servicers endpoint, te su uvedene warning notifikacije kada serviser ima više od 2 zadatka isti dan. U admin su dodane stavke za Bilješke i zaseban Kalendar zadataka (proxy TaskCalendar) radi lakšeg operativnog pregleda. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-07-20 06:33:36 +02:00
parent 61996bd1a0
commit 1a18498b30
20 changed files with 1312 additions and 113 deletions
--- a/frontend/src/components/dashboard/TaskCalendarWidget.jsx
+++ b/frontend/src/components/dashboard/TaskCalendarWidget.jsx
@@ -1,14 +1,12 @@
 import { useMemo, useState } from 'preact/hooks';
-import { animated, useSpring } from '@react-spring/web';
 import { getStatusLabel } from '../../stores/taskStore';
+import LeftSlideDrawer from '../layout/LeftSlideDrawer';

 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);
@@ -20,22 +18,11 @@ 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);
+export default function TaskCalendarWidget({ tasks = [], notes = [], onTaskClick }) {
    const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
    const [viewMonth, setViewMonth] = useState(() => new Date().getMonth());
    const [selectedDay, setSelectedDay] = useState(null);

-    const panelSpring = useSpring({
-        left: open ? 0 : -PANEL_WIDTH,
-        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 = {};
@@ -48,6 +35,17 @@ export default function TaskCalendarWidget({ tasks = [], onTaskClick }) {
        return map;
    }, [tasks]);

+    const notesByDate = useMemo(() => {
+        const map = {};
+        for (const note of notes) {
+            const key = toIsoDateKey(note.note_date);
+            if (!key) continue;
+            if (!map[key]) map[key] = [];
+            map[key].push(note);
+        }
+        return map;
+    }, [notes]);
+
    // Calendar grid cells for current month
    const calendarDays = useMemo(() => {
        const firstDay = new Date(viewYear, viewMonth, 1);
@@ -64,6 +62,7 @@ export default function TaskCalendarWidget({ tasks = [], onTaskClick }) {
        ? `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(selectedDay).padStart(2, '0')}`
        : null;
    const selectedDayTasks = selectedDayKey ? (tasksByDate[selectedDayKey] ?? []) : [];
+    const selectedDayNotes = selectedDayKey ? (notesByDate[selectedDayKey] ?? []) : [];
    const today = new Date();

    function prevMonth() {
@@ -81,49 +80,27 @@ export default function TaskCalendarWidget({ tasks = [], onTaskClick }) {
        setSelectedDay((prev) => (prev === day ? null : day));
    }

-    function handleTaskClick(task) {
+    function handleTaskClick(task, closePanel) {
        onTaskClick?.(task);
-        setOpen(false);
+        closePanel?.();
    }

    const totalScheduled = Object.values(tasksByDate).flat().length;
+    const totalNoteReminders = Object.values(notesByDate).flat().length;

    return (
-        <>
-            {/* Backdrop */}
-            {open && (
-                <div
-                    role="presentation"
-                    className="fixed inset-0 z-[45] bg-black/20 backdrop-blur-[1px]"
-                    onClick={() => setOpen(false)}
-                />
-            )}
-
-            {/* Clipping wrapper — animates width 0→300, clips shadow+border completely */}
-            <animated.div
-                style={{
-                    width: panelSpring.left.to((v) => `${Math.max(0, v + PANEL_WIDTH)}px`),
-                    pointerEvents: open ? 'auto' : 'none',
-                }}
-                className="fixed left-0 top-0 z-[46] h-screen overflow-hidden"
-            >
-                {/* Inner panel — always 300px, anchored to right edge of wrapper */}
-                <div
-                    style={{ width: `${PANEL_WIDTH}px` }}
-                    className="absolute right-0 top-0 flex h-full flex-col 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>
+        <LeftSlideDrawer
+            drawerId="calendar"
+            title="📅 Kalendar zadataka"
+            tabLabel="📅 Kalendar"
+            tabTitle="Kalendar zadataka"
+            tabTopClassName="top-1/2"
+            backdropClassName="z-[45]"
+            panelClassName="z-[46]"
+            tabClassName="z-[47]"
+        >
+            {({ close }) => (
+                <>

                {/* Month navigation */}
                <div className="flex items-center justify-between px-4 py-2">
@@ -162,7 +139,9 @@ export default function TaskCalendarWidget({ tasks = [], onTaskClick }) {
                            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 &&
@@ -173,7 +152,11 @@ export default function TaskCalendarWidget({ tasks = [], onTaskClick }) {
                                    key={key}
                                    type="button"
                                    onClick={() => handleDayClick(day)}
-                                    title={hasTasks ? `${taskCount} zadatak/a` : undefined}
+                                    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
@@ -186,13 +169,25 @@ export default function TaskCalendarWidget({ tasks = [], onTaskClick }) {
                                    ].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(' ')}
-                                        />
+                                    {(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>
                                    )}
                                </button>
                            );
@@ -210,28 +205,50 @@ export default function TaskCalendarWidget({ tasks = [], onTaskClick }) {
                            <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>
+                            {selectedDayTasks.length === 0 && selectedDayNotes.length === 0 ? (
+                                <p className="text-sm text-text-muted">Nema događaja 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>
+                                <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>
+                                    )}
+                                    {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>
+                                                        </button>
+                                                    </li>
+                                                ))}
+                                            </ul>
+                                        </div>
+                                    )}
+                                </div>
                            )}
                        </>
                    ) : (
@@ -244,6 +261,11 @@ export default function TaskCalendarWidget({ tasks = [], onTaskClick }) {
                                    {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.
@@ -252,25 +274,8 @@ export default function TaskCalendarWidget({ tasks = [], onTaskClick }) {
                        </>
                    )}
                </div>
-                </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>
-        </>
+                </>
+            )}
+        </LeftSlideDrawer>
    );
 }
--- a/frontend/src/components/layout/LeftSlideDrawer.jsx
+++ b/frontend/src/components/layout/LeftSlideDrawer.jsx
@@ -0,0 +1,110 @@
+import { useEffect } from 'preact/hooks';
+import { useStore } from '@nanostores/preact';
+import { animated, useSpring } from '@react-spring/web';
+import { $activeLeftDrawer, closeLeftDrawer, openLeftDrawer } from '../../stores/leftDrawerStore';
+
+const DEFAULT_PANEL_WIDTH = 300;
+
+export default function LeftSlideDrawer({
+    drawerId,
+    title,
+    tabLabel,
+    tabTitle,
+    panelWidth = DEFAULT_PANEL_WIDTH,
+    tabTopClassName = 'top-1/2',
+    backdropClassName = 'z-[45]',
+    panelClassName = 'z-[46]',
+    tabClassName = 'z-[47]',
+    children,
+}) {
+    const activeDrawer = useStore($activeLeftDrawer);
+    const isOpen = String(activeDrawer || '') === String(drawerId || '');
+    const isHiddenByOtherDrawer = Boolean(activeDrawer) && !isOpen;
+
+    const panelSpring = useSpring({
+        left: isOpen ? 0 : -panelWidth,
+        config: { tension: 260, friction: 28 },
+    });
+    const buttonSpring = useSpring({
+        left: isOpen ? panelWidth : 0,
+        config: { tension: 260, friction: 28 },
+    });
+
+    useEffect(() => {
+        return () => {
+            closeLeftDrawer(drawerId);
+        };
+    }, [drawerId]);
+
+    if (!drawerId) {
+        return null;
+    }
+
+    if (isHiddenByOtherDrawer) {
+        return null;
+    }
+
+    function handleToggle() {
+        if (isOpen) {
+            closeLeftDrawer(drawerId);
+            return;
+        }
+        openLeftDrawer(drawerId);
+    }
+
+    return (
+        <>
+            {isOpen && (
+                <div
+                    role="presentation"
+                    className={`fixed inset-0 bg-black/20 backdrop-blur-[1px] ${backdropClassName}`}
+                    onClick={() => closeLeftDrawer(drawerId)}
+                />
+            )}
+
+            <animated.div
+                style={{
+                    width: panelSpring.left.to((value) => `${Math.max(0, value + panelWidth)}px`),
+                    pointerEvents: isOpen ? 'auto' : 'none',
+                }}
+                className={`fixed left-0 top-0 h-screen overflow-hidden ${panelClassName}`}
+            >
+                <div
+                    style={{ width: `${panelWidth}px` }}
+                    className="absolute right-0 top-0 flex h-full flex-col border-r border-border-hairline bg-canvas-elevated shadow-2xl"
+                >
+                    <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">{title}</h2>
+                        <button
+                            type="button"
+                            onClick={() => closeLeftDrawer(drawerId)}
+                            className="rounded-md p-1 text-text-muted hover:bg-canvas-deep"
+                            aria-label="Zatvori panel"
+                        >
+                            ✕
+                        </button>
+                    </div>
+                    {typeof children === 'function'
+                        ? children({ open: isOpen, close: () => closeLeftDrawer(drawerId) })
+                        : children}
+                </div>
+            </animated.div>
+
+            <animated.button
+                type="button"
+                style={{ left: buttonSpring.left.to((value) => `${value}px`) }}
+                onClick={handleToggle}
+                className={`fixed ${tabTopClassName} -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 ${tabClassName}`}
+                aria-label={isOpen ? `Zatvori ${tabTitle || 'panel'}` : `Otvori ${tabTitle || 'panel'}`}
+                title={tabTitle || tabLabel}
+            >
+                <span
+                    style={{ writingMode: 'vertical-rl', textOrientation: 'mixed' }}
+                    className="select-none text-[11px] font-medium text-text-main"
+                >
+                    {tabLabel}
+                </span>
+            </animated.button>
+        </>
+    );
+}
--- a/frontend/src/components/layout/ServiceNotesWidget.jsx
+++ b/frontend/src/components/layout/ServiceNotesWidget.jsx
@@ -0,0 +1,248 @@
+import { useMemo, useState } from 'preact/hooks';
+import LeftSlideDrawer from './LeftSlideDrawer';
+
+function formatDate(value) {
+    if (!value) return '-';
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return '-';
+    return new Intl.DateTimeFormat('hr-HR', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    }).format(date);
+}
+
+function workOrderLabel(item) {
+    const code = String(item?.display_code || '').trim().toUpperCase();
+    if (code) return code;
+    return `WO-${String(item?.id || '').slice(0, 8)}`;
+}
+
+export default function ServiceNotesWidget({
+    notes = [],
+    loading = false,
+    canManageRecipients = false,
+    activeTasks = [],
+    activeWorkOrders = [],
+    servicers = [],
+    onCreate,
+    onClose,
+}) {
+    const [note, setNote] = useState('');
+    const [noteDate, setNoteDate] = useState('');
+    const [audience, setAudience] = useState('self');
+    const [targetUsers, setTargetUsers] = useState([]);
+    const [contextType, setContextType] = useState('none');
+    const [contextValue, setContextValue] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+
+    const undatedNotes = useMemo(
+        () => notes.filter((item) => !item.note_date),
+        [notes]
+    );
+    const datedNotes = useMemo(
+        () => notes.filter((item) => !!item.note_date),
+        [notes]
+    );
+
+    async function handleSubmit(event) {
+        event.preventDefault();
+        if (!String(note || '').trim()) return;
+        const payload = {
+            note: String(note || '').trim(),
+            note_date: noteDate || null,
+            audience,
+        };
+        if (audience === 'member' && targetUsers.length > 0) {
+            payload.target_users = targetUsers;
+        }
+        if (contextType === 'work_order' && contextValue) {
+            payload.work_order = contextValue;
+        }
+        if (contextType === 'task' && contextValue) {
+            payload.task = contextValue;
+        }
+        setSubmitting(true);
+        try {
+            await onCreate?.(payload);
+            setNote('');
+            setNoteDate('');
+            setContextType('none');
+            setContextValue('');
+            setAudience('self');
+            setTargetUsers([]);
+        } finally {
+            setSubmitting(false);
+        }
+    }
+
+    return (
+        <LeftSlideDrawer
+            drawerId="notes"
+            title="🗒️ Bilješke"
+            tabLabel="🗒️ Bilješke"
+            tabTitle="Bilješke"
+            tabTopClassName="top-[calc(50%+96px)]"
+            backdropClassName="z-[48]"
+            panelClassName="z-[49]"
+            tabClassName="z-[50]"
+        >
+            <p className="border-b border-border-hairline px-4 py-2 text-[11px] text-text-muted">
+                Bilješke i podsjetnici u servisnom kontekstu
+            </p>
+
+            <form onSubmit={handleSubmit} className="space-y-2 border-b border-border-hairline px-4 py-3">
+                <textarea
+                    value={note}
+                    onInput={(event) => setNote(event.currentTarget.value)}
+                    className="h-16 w-full rounded-md border border-border-hairline bg-canvas-base px-2 py-1.5 text-xs text-text-main"
+                    placeholder="Upiši bilješku..."
+                    required
+                />
+                <input
+                    type="date"
+                    value={noteDate}
+                    onInput={(event) => setNoteDate(event.currentTarget.value)}
+                    className="w-full rounded-md border border-border-hairline bg-canvas-base px-2 py-1.5 text-xs text-text-main"
+                />
+                <select
+                    value={contextType}
+                    onChange={(event) => {
+                        setContextType(event.currentTarget.value);
+                        setContextValue('');
+                    }}
+                    className="w-full rounded-md border border-border-hairline bg-canvas-base px-2 py-1.5 text-xs text-text-main"
+                >
+                    <option value="none">Bez vezanog naloga/zadatka</option>
+                    <option value="work_order">Aktivni putni nalog</option>
+                    <option value="task">Aktivni radni zadatak</option>
+                </select>
+                {contextType === 'work_order' && (
+                    <select
+                        value={contextValue}
+                        onChange={(event) => setContextValue(event.currentTarget.value)}
+                        className="w-full rounded-md border border-border-hairline bg-canvas-base px-2 py-1.5 text-xs text-text-main"
+                    >
+                        <option value="">Odaberi putni nalog</option>
+                        {activeWorkOrders.map((item) => (
+                            <option key={item.id} value={item.id}>
+                                {workOrderLabel(item)}
+                            </option>
+                        ))}
+                    </select>
+                )}
+                {contextType === 'task' && (
+                    <select
+                        value={contextValue}
+                        onChange={(event) => setContextValue(event.currentTarget.value)}
+                        className="w-full rounded-md border border-border-hairline bg-canvas-base px-2 py-1.5 text-xs text-text-main"
+                    >
+                        <option value="">Odaberi radni zadatak</option>
+                        {activeTasks.map((item) => (
+                            <option key={item.id} value={item.id}>
+                                {item.title || `Task ${String(item.id).slice(0, 8)}`}
+                            </option>
+                        ))}
+                    </select>
+                )}
+                <select
+                    value={audience}
+                    onChange={(event) => {
+                        setAudience(event.currentTarget.value);
+                        if (event.currentTarget.value !== 'member') {
+                            setTargetUsers([]);
+                        }
+                    }}
+                    className="w-full rounded-md border border-border-hairline bg-canvas-base px-2 py-1.5 text-xs text-text-main"
+                >
+                    <option value="self">Notifikacija samo meni</option>
+                    {canManageRecipients && <option value="member">Notifikacija serviserima</option>}
+                    {canManageRecipients && <option value="team">Notifikacija svim članovima tima</option>}
+                </select>
+                {canManageRecipients && audience === 'member' && (
+                    <select
+                        multiple
+                        value={targetUsers}
+                        onChange={(event) => {
+                            const selected = Array.from(event.currentTarget.selectedOptions).map((option) => option.value);
+                            setTargetUsers(selected);
+                        }}
+                        size={Math.min(6, Math.max(3, servicers.length || 3))}
+                        className="w-full rounded-md border border-border-hairline bg-canvas-base px-2 py-1.5 text-xs text-text-main"
+                    >
+                        {servicers.map((member) => (
+                            <option key={member.id} value={member.id}>
+                                {member.full_name || member.email}
+                            </option>
+                        ))}
+                    </select>
+                )}
+                {canManageRecipients && audience === 'member' && (
+                    <p className="text-[10px] text-text-muted">
+                        Držite Ctrl (ili Cmd) za odabir više servisera.
+                    </p>
+                )}
+                <button
+                    type="submit"
+                    disabled={submitting}
+                    className="w-full rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"
+                >
+                    {submitting ? 'Spremanje...' : 'Spremi bilješku'}
+                </button>
+            </form>
+
+            <div className="flex-1 overflow-y-auto px-4 py-3">
+                {loading && <p className="text-xs text-text-muted">Učitavanje bilješki...</p>}
+                {!loading && undatedNotes.length === 0 && datedNotes.length === 0 && (
+                    <p className="text-xs text-text-muted">Nema aktivnih bilješki.</p>
+                )}
+
+                {undatedNotes.length > 0 && (
+                    <div className="mb-3">
+                        <p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-violet-700">Bez datuma (permanentno)</p>
+                        <ul className="space-y-1.5">
+                            {undatedNotes.map((item) => (
+                                <li key={item.id} className="rounded-md border border-violet-200 bg-violet-50 px-2 py-1.5">
+                                    <p className="text-xs text-violet-900">{item.note}</p>
+                                    <div className="mt-1 flex items-center justify-between">
+                                        <span className="text-[10px] text-violet-700">{item.task_title || item.work_order_label || 'Općenito'}</span>
+                                        <button
+                                            type="button"
+                                            onClick={() => onClose?.(item.id)}
+                                            className="text-[10px] font-semibold text-violet-700 hover:text-violet-900"
+                                        >
+                                            Zatvori
+                                        </button>
+                                    </div>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
+
+                {datedNotes.length > 0 && (
+                    <div>
+                        <p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-text-muted">Podsjetnici</p>
+                        <ul className="space-y-1.5">
+                            {datedNotes.map((item) => (
+                                <li key={item.id} className="rounded-md border border-border-hairline bg-canvas-base px-2 py-1.5">
+                                    <p className="text-xs text-text-main">{item.note}</p>
+                                    <div className="mt-1 flex items-center justify-between text-[10px] text-text-muted">
+                                        <span>{formatDate(item.note_date)}</span>
+                                        <button
+                                            type="button"
+                                            onClick={() => onClose?.(item.id)}
+                                            className="font-semibold text-indigo-600 hover:text-indigo-800"
+                                        >
+                                            Zatvori
+                                        </button>
+                                    </div>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
+            </div>
+        </LeftSlideDrawer>
+    );
+}
--- a/frontend/src/components/layout/TaskCalendarPortal.jsx
+++ b/frontend/src/components/layout/TaskCalendarPortal.jsx
@@ -1,8 +1,17 @@
-import { useMemo } from 'preact/hooks';
+import { useEffect, useMemo, useState } from 'preact/hooks';
 import { useStore } from '@nanostores/preact';
 import { $tasks } from '../../stores/taskStore';
 import { $user } from '../../stores/authStore';
+import { $workOrdersWithVehicle, fetchServicers } from '../../stores/fleetDashboardStore';
+import {
+    $serviceNotes,
+    $serviceNotesLoading,
+    closeServiceNote,
+    createServiceNote,
+    fetchServiceNotes,
+} from '../../stores/serviceNotesStore';
 import TaskCalendarWidget from '../dashboard/TaskCalendarWidget';
+import ServiceNotesWidget from './ServiceNotesWidget';

 /**
 * Mountan u Layout.astro (van AnimatedPage transforma) pa fixed pozicija
@@ -17,11 +26,16 @@ import TaskCalendarWidget from '../dashboard/TaskCalendarWidget';
 */
 export default function TaskCalendarPortal() {
    const allTasks = useStore($tasks);
+    const workOrders = useStore($workOrdersWithVehicle);
+    const notes = useStore($serviceNotes);
+    const notesLoading = useStore($serviceNotesLoading);
    const user = useStore($user);
+    const [servicers, setServicers] = useState([]);

    const isServiser = Boolean(user?.is_serviser);
    const isTeamMember = Boolean(user?.is_team_member);
    const isSupervisorNotServiser = isTeamMember && !isServiser;
+    const canManageRecipients = isSupervisorNotServiser || isServiser;

    const tasks = useMemo(() => {
        if (!user?.id) return [];
@@ -32,6 +46,49 @@ export default function TaskCalendarPortal() {
        );
    }, [allTasks, user, isSupervisorNotServiser]);

+    const activeTasks = useMemo(
+        () => tasks.filter((task) => !['zavrsen', 'neaktivan'].includes(String(task.status || '').toLowerCase())),
+        [tasks]
+    );
+    const activeWorkOrders = useMemo(() => {
+        const base = Array.isArray(workOrders) ? workOrders : [];
+        if (isSupervisorNotServiser) {
+            return base.filter((item) => String(item.status || '').toLowerCase() === 'open');
+        }
+        return base.filter((item) => (
+            String(item.status || '').toLowerCase() === 'open'
+            && (
+                String(item.creator || '') === String(user?.id || '')
+                || String(item.craneInfo?.assigned_servicer || '') === String(user?.id || '')
+            )
+        ));
+    }, [workOrders, isSupervisorNotServiser, user?.id]);
+
+    useEffect(() => {
+        if (!user?.id) return;
+        fetchServiceNotes().catch(() => {});
+    }, [user?.id]);
+
+    useEffect(() => {
+        if (!canManageRecipients) {
+            setServicers([]);
+            return;
+        }
+        let active = true;
+        fetchServicers()
+            .then((rows) => {
+                if (!active) return;
+                setServicers(Array.isArray(rows) ? rows : []);
+            })
+            .catch(() => {
+                if (!active) return;
+                setServicers([]);
+            });
+        return () => {
+            active = false;
+        };
+    }, [canManageRecipients]);
+
    // Ne renderiramo ništa ako korisnik nije prijavljen
    if (!user?.id) return null;

@@ -42,9 +99,22 @@ export default function TaskCalendarPortal() {
    }

    return (
-        <TaskCalendarWidget
-            tasks={tasks}
-            onTaskClick={handleTaskClick}
-        />
+        <>
+            <TaskCalendarWidget
+                tasks={tasks}
+                notes={notes}
+                onTaskClick={handleTaskClick}
+            />
+            <ServiceNotesWidget
+                notes={notes}
+                loading={notesLoading}
+                canManageRecipients={canManageRecipients}
+                activeTasks={activeTasks}
+                activeWorkOrders={activeWorkOrders}
+                servicers={servicers}
+                onCreate={createServiceNote}
+                onClose={closeServiceNote}
+            />
+        </>
    );
 }
--- a/frontend/src/stores/fleetDashboardStore.js
+++ b/frontend/src/stores/fleetDashboardStore.js
@@ -878,6 +878,11 @@ export async function fetchTeamMembers() {
    return Array.isArray(members) ? members : [];
 }

+export async function fetchServicers() {
+    const members = await api.get('users/servicers/');
+    return Array.isArray(members) ? members : [];
+}
+
 export async function sendWorkOrderEmail(workOrderId, payload = {}, options = {}) {
    if (!workOrderId) {
        throw new Error('Work order ID je obavezan.');
--- a/frontend/src/stores/leftDrawerStore.js
+++ b/frontend/src/stores/leftDrawerStore.js
@@ -0,0 +1,17 @@
+import { atom } from 'nanostores';
+
+export const $activeLeftDrawer = atom(null);
+
+export function openLeftDrawer(drawerId) {
+    $activeLeftDrawer.set(drawerId || null);
+}
+
+export function closeLeftDrawer(drawerId = null) {
+    if (!drawerId) {
+        $activeLeftDrawer.set(null);
+        return;
+    }
+    if (String($activeLeftDrawer.get() || '') === String(drawerId)) {
+        $activeLeftDrawer.set(null);
+    }
+}
--- a/frontend/src/stores/serviceNotesStore.js
+++ b/frontend/src/stores/serviceNotesStore.js
@@ -0,0 +1,44 @@
+import { atom } from 'nanostores';
+import { api } from '../services/apiClient';
+import { showToast } from './toastStore';
+
+export const $serviceNotes = atom([]);
+export const $serviceNotesLoading = atom(false);
+
+export async function fetchServiceNotes() {
+    $serviceNotesLoading.set(true);
+    try {
+        const payload = await api.get('fleet/service-notes/');
+        $serviceNotes.set(Array.isArray(payload) ? payload : []);
+    } catch (error) {
+        if (error?.status !== 401) {
+            showToast('Neuspješno dohvaćanje bilješki.', 'error');
+        }
+        throw error;
+    } finally {
+        $serviceNotesLoading.set(false);
+    }
+}
+
+export async function createServiceNote(data) {
+    const payload = await api.post('fleet/service-notes/', data ?? {});
+    const nextNotes = Array.isArray(payload?.notes) ? payload.notes : null;
+    if (nextNotes) {
+        $serviceNotes.set(nextNotes);
+    } else {
+        await fetchServiceNotes();
+    }
+    showToast('Bilješka je spremljena.', 'success');
+    return payload;
+}
+
+export async function closeServiceNote(noteId) {
+    if (!noteId) {
+        throw new Error('ID bilješke je obavezan.');
+    }
+    await api.post(`fleet/service-notes/${encodeURIComponent(noteId)}/close/`, {});
+    $serviceNotes.set(
+        $serviceNotes.get().filter((item) => String(item.id) !== String(noteId))
+    );
+    showToast('Bilješka je zatvorena.', 'success');
+}