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>
This commit is contained in:
mariomitte
@@ -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}
|
||||
|
||||
267
frontend/src/components/dashboard/TaskCalendarWidget.jsx
Normal file
267
frontend/src/components/dashboard/TaskCalendarWidget.jsx
Normal file
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user