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>
This commit is contained in:
mariomitte
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user