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>

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>
+        </>
+    );
+}

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>
+    );
+}

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}
+            />
+        </>
     );
 }