681f73d85a
PREKOVREMENI (overtime hours) is now correctly calculated as the difference between total work+travel hours and the standard 8-hour workday.
996 lines
51 KiB
JavaScript
996 lines
51 KiB
JavaScript
import { useEffect, useMemo, useState } from 'preact/hooks';
|
|
import { getStatusLabel } from '../../stores/taskStore';
|
|
import {
|
|
downloadMonthlyServiceTasksArchive,
|
|
downloadMonthlyCostsReport,
|
|
downloadMonthlyServiserReport,
|
|
downloadMonthlyWorkOrdersArchive,
|
|
fetchMonthlyCostInvoices,
|
|
fetchMonthlyServicerEntries,
|
|
upsertMonthlyServicerEntry,
|
|
} from '../../stores/fleetDashboardStore';
|
|
import LeftSlideDrawer from '../layout/LeftSlideDrawer';
|
|
import { getTaskCraneKind, getTaskCraneOwner, getTaskCraneSerial } from '../../lib/taskCraneDisplay';
|
|
|
|
const WEEKDAY_LABELS = ['Po', 'Ut', 'Sr', 'Ce', 'Pe', 'Su', 'Ne'];
|
|
const MONTH_NAMES = [
|
|
'Sijecanj', 'Veljaca', 'Ozujak', 'Travanj', 'Svibanj', 'Lipanj',
|
|
'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac',
|
|
];
|
|
const SERVICER_HEADERS = ['DATUM', 'OPIS POSLA', 'BR. DIZALICE', 'KOMITENT', 'MJESTO RADA', 'POCETAK RADA', 'KRAJ RADA', 'REDOVAN RAD (h)', 'PREKOVREMENI (h)', 'RADNI NALOG'];
|
|
const COST_HEADERS = ['DATUM', 'NAZIV RACUNA', 'LOKACIJA', 'OPIS', 'RADNI NALOG'];
|
|
|
|
function toDateKey(value) {
|
|
const text = String(value || '').trim();
|
|
if (!text) return null;
|
|
if (/^\d{4}-\d{2}-\d{2}$/.test(text)) return text;
|
|
const croatian = text.match(/^(\d{2})\.(\d{2})\.(\d{4})\.?$/);
|
|
if (croatian) {
|
|
return `${croatian[3]}-${croatian[2]}-${croatian[1]}`;
|
|
}
|
|
const parsed = new Date(text);
|
|
if (Number.isNaN(parsed.getTime())) return null;
|
|
return `${parsed.getFullYear()}-${String(parsed.getMonth() + 1).padStart(2, '0')}-${String(parsed.getDate()).padStart(2, '0')}`;
|
|
}
|
|
|
|
function formatDayLabel(year, month, day) {
|
|
return `${String(day).padStart(2, '0')}.${String(month + 1).padStart(2, '0')}.${year}`;
|
|
}
|
|
|
|
function formatDateFromKey(dateKey) {
|
|
const [year, month, day] = String(dateKey || '').split('-');
|
|
if (!year || !month || !day) return '-';
|
|
return `${day}.${month}.${year}.`;
|
|
}
|
|
|
|
function formatTime(value) {
|
|
if (!value) return '-';
|
|
if (typeof value === 'string' && /^\d{2}:\d{2}/.test(value)) {
|
|
return value.slice(0, 5);
|
|
}
|
|
const parsed = new Date(value);
|
|
if (Number.isNaN(parsed.getTime())) return '-';
|
|
return parsed.toLocaleTimeString('hr-HR', { hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
|
|
function toTimeInputValue(value) {
|
|
const formatted = formatTime(value);
|
|
return formatted === '-' ? '' : formatted;
|
|
}
|
|
|
|
function calculateHours(startTime, endTime) {
|
|
if (!startTime || !endTime) return null;
|
|
const [startHour, startMinute] = String(startTime).split(':').map((part) => Number(part));
|
|
const [endHour, endMinute] = String(endTime).split(':').map((part) => Number(part));
|
|
if (![startHour, startMinute, endHour, endMinute].every((value) => Number.isFinite(value))) return null;
|
|
const startTotal = (startHour * 60) + startMinute;
|
|
const endTotal = (endHour * 60) + endMinute;
|
|
if (endTotal <= startTotal) return null;
|
|
return ((endTotal - startTotal) / 60).toFixed(2).replace(/\.?0+$/, '');
|
|
}
|
|
|
|
function formatHourValue(value, fallback = '-') {
|
|
if (value == null || value === '') return fallback;
|
|
const numeric = Number(value);
|
|
if (!Number.isFinite(numeric)) return String(value);
|
|
if (Number.isInteger(numeric)) return String(numeric);
|
|
return numeric.toFixed(2).replace(/\.?0+$/, '');
|
|
}
|
|
|
|
function joinUnique(values) {
|
|
return Array.from(new Set(values.filter(Boolean).map((item) => String(item).trim()).filter(Boolean))).join(', ');
|
|
}
|
|
|
|
function parseReportHours(value) {
|
|
if (value == null || value === '') return 0;
|
|
const numeric = Number(String(value).replace(',', '.'));
|
|
return Number.isFinite(numeric) ? numeric : 0;
|
|
}
|
|
|
|
function parseReportDateTime(dateKey, value) {
|
|
if (value == null || value === '') return null;
|
|
if (value instanceof Date) {
|
|
return new Date(value.getTime());
|
|
}
|
|
const text = String(value).trim();
|
|
if (!text) return null;
|
|
const timeMatch = text.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
|
|
if (dateKey && timeMatch) {
|
|
const hours = String(timeMatch[1]).padStart(2, '0');
|
|
const minutes = timeMatch[2];
|
|
const seconds = timeMatch[3] || '00';
|
|
return new Date(`${dateKey}T${hours}:${minutes}:${seconds}`);
|
|
}
|
|
const parsed = new Date(text);
|
|
return Number.isNaN(parsed.getTime()) ? null : parsed;
|
|
}
|
|
|
|
function getTaskWorkHoursEntries(task, workOrdersById) {
|
|
const tableData = task?.work_hours_table?.data ?? task?.work_hours_table ?? null;
|
|
const rows = Array.isArray(tableData?.rows) ? tableData.rows : [];
|
|
const workOrder = workOrdersById.get(String(task?.work_order || ''));
|
|
const base = {
|
|
title: task?.title || '',
|
|
serial: getTaskCraneSerial(task) || '',
|
|
client: getTaskCraneOwner(task) || '',
|
|
location: workOrder?.location || '',
|
|
workOrderLabel: task?.work_order_label || '',
|
|
};
|
|
const entries = [];
|
|
|
|
for (const row of rows) {
|
|
if (!row || typeof row !== 'object') continue;
|
|
const dateKey = toDateKey(row.date) || toDateKey(task?.scheduled_date);
|
|
if (!dateKey) continue;
|
|
const startAt = parseReportDateTime(dateKey, row.work_time_from || row.travel_time_from || '');
|
|
const endAt = parseReportDateTime(dateKey, row.work_time_to || row.travel_time_to || '');
|
|
entries.push({
|
|
...base,
|
|
dateKey,
|
|
startAt,
|
|
endAt,
|
|
totalHours: parseReportHours(row.work_hours) + parseReportHours(row.travel_hours),
|
|
});
|
|
}
|
|
|
|
if (entries.length > 0) {
|
|
return entries;
|
|
}
|
|
|
|
const travelStart = workOrder?.travel_start_at;
|
|
const travelEnd = workOrder?.travel_end_at;
|
|
if (travelStart && travelEnd) {
|
|
const startAt = parseReportDateTime(null, travelStart);
|
|
const endAt = parseReportDateTime(null, travelEnd);
|
|
const dateKey = toDateKey(task?.scheduled_date) || toDateKey(travelStart);
|
|
const totalHours = startAt && endAt ? Math.max(0, (endAt.getTime() - startAt.getTime()) / 3600000) : 0;
|
|
if (dateKey) {
|
|
entries.push({
|
|
...base,
|
|
dateKey,
|
|
startAt,
|
|
endAt,
|
|
totalHours,
|
|
});
|
|
}
|
|
}
|
|
|
|
return entries;
|
|
}
|
|
|
|
export default function TaskCalendarWidget({ tasks = [], notes = [], workOrders = [], onTaskClick }) {
|
|
const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
|
|
const [viewMonth, setViewMonth] = useState(() => new Date().getMonth());
|
|
const [selectedDay, setSelectedDay] = useState(null);
|
|
const [reportType, setReportType] = useState(null);
|
|
const [downloading, setDownloading] = useState(false);
|
|
const [manualEntries, setManualEntries] = useState([]);
|
|
const [costInvoices, setCostInvoices] = useState([]);
|
|
const [loadingManualEntries, setLoadingManualEntries] = useState(false);
|
|
const [loadingCostInvoices, setLoadingCostInvoices] = useState(false);
|
|
const [manualEntryTarget, setManualEntryTarget] = useState(null);
|
|
const [manualEntryDraft, setManualEntryDraft] = useState(null);
|
|
const [manualEntryError, setManualEntryError] = useState('');
|
|
const [savingManualEntry, setSavingManualEntry] = useState(false);
|
|
const [bulkDownloadOpen, setBulkDownloadOpen] = useState(false);
|
|
const [downloadingAllTasks, setDownloadingAllTasks] = useState(false);
|
|
const [downloadingAllWorkOrders, setDownloadingAllWorkOrders] = useState(false);
|
|
|
|
const reportOpen = reportType !== null;
|
|
const panelWidth = reportOpen ? 920 : 300;
|
|
|
|
const tasksByDate = useMemo(() => {
|
|
const map = {};
|
|
for (const task of tasks) {
|
|
const key = toDateKey(task.scheduled_date);
|
|
if (!key) continue;
|
|
if (!map[key]) map[key] = [];
|
|
map[key].push(task);
|
|
}
|
|
return map;
|
|
}, [tasks]);
|
|
|
|
const notesByDate = useMemo(() => {
|
|
const map = {};
|
|
for (const note of notes) {
|
|
const key = toDateKey(note.note_date);
|
|
if (!key) continue;
|
|
if (!map[key]) map[key] = [];
|
|
map[key].push(note);
|
|
}
|
|
return map;
|
|
}, [notes]);
|
|
|
|
const workOrdersById = useMemo(() => {
|
|
const map = new Map();
|
|
for (const workOrder of workOrders) {
|
|
if (workOrder?.id) {
|
|
map.set(String(workOrder.id), workOrder);
|
|
}
|
|
}
|
|
return map;
|
|
}, [workOrders]);
|
|
|
|
const manualEntriesByDate = useMemo(() => {
|
|
const map = {};
|
|
for (const entry of manualEntries) {
|
|
const key = toDateKey(entry.entry_date);
|
|
if (key) {
|
|
map[key] = entry;
|
|
}
|
|
}
|
|
return map;
|
|
}, [manualEntries]);
|
|
|
|
const calendarDays = useMemo(() => {
|
|
const firstDay = new Date(viewYear, viewMonth, 1);
|
|
let startDow = firstDay.getDay();
|
|
startDow = (startDow + 6) % 7;
|
|
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
|
|
const cells = [];
|
|
for (let i = 0; i < startDow; i += 1) cells.push(null);
|
|
for (let d = 1; d <= daysInMonth; d += 1) cells.push(d);
|
|
return cells;
|
|
}, [viewYear, viewMonth]);
|
|
|
|
useEffect(() => {
|
|
if (!reportOpen || reportType !== 'servicer') return undefined;
|
|
let active = true;
|
|
setLoadingManualEntries(true);
|
|
fetchMonthlyServicerEntries(viewYear, viewMonth + 1)
|
|
.then((rows) => {
|
|
if (!active) return;
|
|
setManualEntries(Array.isArray(rows) ? rows : []);
|
|
})
|
|
.catch(() => {
|
|
if (!active) return;
|
|
setManualEntries([]);
|
|
})
|
|
.finally(() => {
|
|
if (!active) return;
|
|
setLoadingManualEntries(false);
|
|
});
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [reportOpen, reportType, viewYear, viewMonth]);
|
|
|
|
useEffect(() => {
|
|
if (!reportOpen || reportType !== 'costs') return undefined;
|
|
let active = true;
|
|
setLoadingCostInvoices(true);
|
|
fetchMonthlyCostInvoices(viewYear, viewMonth + 1)
|
|
.then((rows) => {
|
|
if (!active) return;
|
|
setCostInvoices(Array.isArray(rows) ? rows : []);
|
|
})
|
|
.catch(() => {
|
|
if (!active) return;
|
|
setCostInvoices([]);
|
|
})
|
|
.finally(() => {
|
|
if (!active) return;
|
|
setLoadingCostInvoices(false);
|
|
});
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [reportOpen, reportType, viewYear, viewMonth]);
|
|
|
|
const reportTaskEntriesByDate = useMemo(() => {
|
|
const map = {};
|
|
for (const task of tasks) {
|
|
for (const entry of getTaskWorkHoursEntries(task, workOrdersById)) {
|
|
if (!map[entry.dateKey]) map[entry.dateKey] = [];
|
|
map[entry.dateKey].push(entry);
|
|
}
|
|
}
|
|
return map;
|
|
}, [tasks, workOrdersById]);
|
|
|
|
const servicerRows = useMemo(() => {
|
|
if (reportType !== 'servicer') return [];
|
|
const rows = [];
|
|
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
|
|
const monthPrefix = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}`;
|
|
|
|
for (let day = 1; day <= daysInMonth; day += 1) {
|
|
const key = `${monthPrefix}-${String(day).padStart(2, '0')}`;
|
|
const dayEntries = reportTaskEntriesByDate[key] ?? [];
|
|
const manualEntry = manualEntriesByDate[key];
|
|
|
|
if (dayEntries.length > 0) {
|
|
const titles = [];
|
|
const serials = [];
|
|
const clients = [];
|
|
const locations = [];
|
|
const workOrderLabels = [];
|
|
const startTimes = [];
|
|
const endTimes = [];
|
|
let totalHours = 0;
|
|
|
|
for (const entry of dayEntries) {
|
|
if (entry.title) titles.push(entry.title);
|
|
if (entry.serial) serials.push(entry.serial);
|
|
if (entry.client) clients.push(entry.client);
|
|
if (entry.location) locations.push(entry.location);
|
|
if (entry.workOrderLabel) workOrderLabels.push(entry.workOrderLabel);
|
|
if (entry.startAt) startTimes.push(entry.startAt);
|
|
if (entry.endAt) endTimes.push(entry.endAt);
|
|
totalHours += Number(entry.totalHours || 0);
|
|
}
|
|
|
|
const regularHours = 8;
|
|
const overtimeHours = Math.max(0, totalHours - regularHours);
|
|
rows.push({
|
|
key,
|
|
clickable: false,
|
|
source: 'task',
|
|
cells: [
|
|
formatDateFromKey(key),
|
|
joinUnique(titles) || '-',
|
|
joinUnique(serials) || '-',
|
|
joinUnique(clients) || '-',
|
|
joinUnique(locations) || '-',
|
|
startTimes.length ? formatTime(new Date(Math.min(...startTimes.map((item) => item.getTime())))) : '-',
|
|
endTimes.length ? formatTime(new Date(Math.max(...endTimes.map((item) => item.getTime())))) : '-',
|
|
formatHourValue(regularHours, '0'),
|
|
formatHourValue(overtimeHours, '0'),
|
|
joinUnique(workOrderLabels) || '-',
|
|
],
|
|
});
|
|
continue;
|
|
}
|
|
|
|
if (manualEntry) {
|
|
rows.push({
|
|
key,
|
|
clickable: true,
|
|
source: manualEntry.entry_type,
|
|
cells: [
|
|
formatDateFromKey(key),
|
|
manualEntry.description || '-',
|
|
'-',
|
|
'-',
|
|
manualEntry.location || '-',
|
|
formatTime(manualEntry.start_time),
|
|
formatTime(manualEntry.end_time),
|
|
formatHourValue(manualEntry.regular_hours, '0'),
|
|
formatHourValue(manualEntry.overtime_hours, '0'),
|
|
'-',
|
|
],
|
|
});
|
|
continue;
|
|
}
|
|
|
|
rows.push({
|
|
key,
|
|
clickable: true,
|
|
source: 'empty',
|
|
cells: [formatDateFromKey(key), 'Klikni za unos', '-', '-', '-', '-', '-', '-', '0', '-'],
|
|
});
|
|
}
|
|
|
|
return rows;
|
|
}, [manualEntriesByDate, reportTaskEntriesByDate, reportType, viewMonth, viewYear]);
|
|
|
|
const costsRows = useMemo(() => {
|
|
if (reportType !== 'costs') return [];
|
|
return costInvoices.map((invoice) => ([
|
|
invoice?.datum ? new Date(invoice.datum).toLocaleDateString('hr-HR') : '-',
|
|
invoice?.naziv_racuna || '-',
|
|
invoice?.lokacija || '-',
|
|
invoice?.opis || '-',
|
|
invoice?.work_order_display_code || '-',
|
|
]));
|
|
}, [costInvoices, reportType]);
|
|
|
|
const selectedDayKey = selectedDay
|
|
? `${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();
|
|
const totalScheduled = Object.values(tasksByDate).flat().length;
|
|
const totalNoteReminders = Object.values(notesByDate).flat().length;
|
|
|
|
function prevMonth() {
|
|
setSelectedDay(null);
|
|
if (viewMonth === 0) {
|
|
setViewYear((y) => y - 1);
|
|
setViewMonth(11);
|
|
return;
|
|
}
|
|
setViewMonth((m) => m - 1);
|
|
}
|
|
|
|
function nextMonth() {
|
|
setSelectedDay(null);
|
|
if (viewMonth === 11) {
|
|
setViewYear((y) => y + 1);
|
|
setViewMonth(0);
|
|
return;
|
|
}
|
|
setViewMonth((m) => m + 1);
|
|
}
|
|
|
|
function handleDayClick(day) {
|
|
setSelectedDay((prev) => (prev === day ? null : day));
|
|
}
|
|
|
|
function handleTaskClick(task, closePanel) {
|
|
onTaskClick?.(task);
|
|
closePanel?.();
|
|
}
|
|
|
|
function toggleReport(type) {
|
|
setReportType((prev) => (prev === type ? null : type));
|
|
setManualEntryTarget(null);
|
|
if (type !== 'servicer') {
|
|
setBulkDownloadOpen(false);
|
|
}
|
|
}
|
|
|
|
async function handleDownload() {
|
|
if (downloading) return;
|
|
setDownloading(true);
|
|
try {
|
|
if (reportType === 'servicer') {
|
|
await downloadMonthlyServiserReport(viewYear, viewMonth + 1);
|
|
} else if (reportType === 'costs') {
|
|
await downloadMonthlyCostsReport(viewYear, viewMonth + 1);
|
|
}
|
|
} finally {
|
|
setDownloading(false);
|
|
}
|
|
}
|
|
|
|
async function handleDownloadAllTasksArchive() {
|
|
if (downloadingAllTasks) return;
|
|
setBulkDownloadOpen(false);
|
|
setDownloadingAllTasks(true);
|
|
try {
|
|
await downloadMonthlyServiceTasksArchive(viewYear, viewMonth + 1);
|
|
} finally {
|
|
setDownloadingAllTasks(false);
|
|
}
|
|
}
|
|
|
|
async function handleDownloadAllWorkOrdersArchive() {
|
|
if (downloadingAllWorkOrders) return;
|
|
setBulkDownloadOpen(false);
|
|
setDownloadingAllWorkOrders(true);
|
|
try {
|
|
await downloadMonthlyWorkOrdersArchive(viewYear, viewMonth + 1);
|
|
} finally {
|
|
setDownloadingAllWorkOrders(false);
|
|
}
|
|
}
|
|
|
|
function handleServicerRowClick(row) {
|
|
if (!row?.clickable) return;
|
|
setManualEntryTarget(row);
|
|
setManualEntryDraft(null);
|
|
setManualEntryError('');
|
|
}
|
|
|
|
function startManualEntry(entryType) {
|
|
if (!manualEntryTarget) return;
|
|
const isOffice = entryType === 'office';
|
|
setManualEntryError('');
|
|
setManualEntryDraft({
|
|
entryType,
|
|
startTime: isOffice ? '08:00' : '',
|
|
endTime: isOffice ? '16:00' : '',
|
|
});
|
|
}
|
|
|
|
async function handleSaveManualEntry() {
|
|
if (!manualEntryTarget || !manualEntryDraft || savingManualEntry) return;
|
|
const { entryType, startTime, endTime } = manualEntryDraft;
|
|
if (startTime && endTime && !calculateHours(startTime, endTime)) {
|
|
setManualEntryError('Kraj rada mora biti nakon početka rada.');
|
|
return;
|
|
}
|
|
setManualEntryError('');
|
|
setSavingManualEntry(true);
|
|
try {
|
|
const saved = await upsertMonthlyServicerEntry({
|
|
entry_date: manualEntryTarget.key,
|
|
entry_type: entryType,
|
|
start_time: startTime || undefined,
|
|
end_time: endTime || undefined,
|
|
});
|
|
setManualEntries((prev) => {
|
|
const next = Array.isArray(prev) ? [...prev] : [];
|
|
const index = next.findIndex((item) => toDateKey(item.entry_date) === toDateKey(saved.entry_date));
|
|
if (index >= 0) {
|
|
next[index] = saved;
|
|
} else {
|
|
next.push(saved);
|
|
}
|
|
return next.sort((a, b) => String(a.entry_date || '').localeCompare(String(b.entry_date || '')));
|
|
});
|
|
setManualEntryTarget(null);
|
|
setManualEntryDraft(null);
|
|
setManualEntryError('');
|
|
} finally {
|
|
setSavingManualEntry(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<LeftSlideDrawer
|
|
drawerId="calendar"
|
|
title="Kalendar zadataka"
|
|
tabLabel="Kalendar"
|
|
tabTitle="Kalendar zadataka"
|
|
tabTopClassName="top-1/2"
|
|
backdropClassName="z-[45]"
|
|
panelClassName="z-[46]"
|
|
tabClassName="z-[47]"
|
|
panelWidth={panelWidth}
|
|
>
|
|
{({ close }) => (
|
|
<div className="relative flex min-h-0 flex-1 overflow-hidden">
|
|
<div
|
|
className="flex w-[300px] flex-shrink-0 flex-col overflow-hidden"
|
|
style={reportOpen ? { borderRight: '1px solid var(--color-border-hairline, #e5e7eb)' } : {}}
|
|
>
|
|
<div className="flex gap-1.5 border-b border-border-hairline px-3 py-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleReport('servicer')}
|
|
className={[
|
|
'flex-1 rounded px-2 py-1 text-[11px] font-medium transition-colors',
|
|
reportType === 'servicer'
|
|
? 'bg-indigo-600 text-white'
|
|
: 'bg-canvas-deep text-text-main hover:bg-indigo-50 hover:text-indigo-700',
|
|
].join(' ')}
|
|
title="Otvori panel za mjesecni izvjestaj servisera"
|
|
>
|
|
Izvjestaj servisera
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleReport('costs')}
|
|
className={[
|
|
'flex-1 rounded px-2 py-1 text-[11px] font-medium transition-colors',
|
|
reportType === 'costs'
|
|
? 'bg-emerald-600 text-white'
|
|
: 'bg-canvas-deep text-text-main hover:bg-emerald-50 hover:text-emerald-700',
|
|
].join(' ')}
|
|
title="Otvori panel za mjesecni izvjestaj troskova"
|
|
>
|
|
Izvjestaj troskova
|
|
</button>
|
|
</div>
|
|
|
|
<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="Sljedeci mjesec"
|
|
>
|
|
>
|
|
</button>
|
|
</div>
|
|
|
|
<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 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
|
|
&& today.getDate() === day;
|
|
const isSelected = selectedDay === day;
|
|
return (
|
|
<button
|
|
key={key}
|
|
type="button"
|
|
onClick={() => handleDayClick(day)}
|
|
title={hasTasks || hasNotes ? `${taskCount} zadatak/a, ${noteCount} biljeski` : 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 || 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>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-2 border-t border-border-hairline" />
|
|
|
|
<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 && selectedDayNotes.length === 0 ? (
|
|
<p className="text-sm text-text-muted">Nema dogadjaja za odabrani datum.</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{selectedDayNotes.length > 0 && (
|
|
<div>
|
|
<p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-violet-700">Biljeske</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 transition-colors hover:border-indigo-200 hover:bg-indigo-50"
|
|
>
|
|
<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>
|
|
<span className="mt-0.5 block text-[11px] text-text-muted">
|
|
{getTaskCraneSerial(task)} | {getTaskCraneKind(task)} | {getTaskCraneOwner(task)}
|
|
</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<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>
|
|
)}
|
|
{totalNoteReminders > 0 && (
|
|
<p className="mt-1 text-xs font-medium text-violet-600">
|
|
{totalNoteReminders} biljeski/podsjetnika u kalendaru.
|
|
</p>
|
|
)}
|
|
{totalScheduled === 0 && (
|
|
<p className="mt-1.5 text-[11px] text-text-muted">
|
|
Nijedan zadatak nema postavljen planirani datum.
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{reportOpen && (
|
|
<div className="flex flex-1 flex-col overflow-hidden">
|
|
<div className="flex items-center justify-between border-b border-border-hairline px-4 py-2">
|
|
<div>
|
|
<span className="text-sm font-semibold text-text-main">
|
|
{reportType === 'servicer' ? 'Mjesecni izvjestaj servisera' : 'Mjesecni izvjestaj troskova'}
|
|
</span>
|
|
<span className="ml-2 text-xs text-text-muted">
|
|
{MONTH_NAMES[viewMonth]} {viewYear}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={handleDownload}
|
|
disabled={downloading}
|
|
className="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700 disabled:opacity-60"
|
|
>
|
|
{downloading ? 'Preuzimanje...' : reportType === 'servicer' ? 'Preuzmi mjesečni izvještaj' : 'Preuzmi DOCX'}
|
|
</button>
|
|
{reportType === 'servicer' && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setBulkDownloadOpen(true)}
|
|
className="rounded-md border border-border-hairline px-3 py-1.5 text-xs font-medium text-text-main hover:bg-canvas-deep"
|
|
>
|
|
Preuzmi ZIP
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<p className="border-b border-border-hairline bg-canvas-deep px-4 py-1.5 text-[11px] text-text-muted">
|
|
{reportType === 'servicer'
|
|
? 'Tablica prikazuje sve dane u mjesecu. Klikni na red bez putnog naloga i odaberi status dana.'
|
|
: 'Pregled troskova iz racuna vezanih uz putne naloge u odabranom mjesecu.'}
|
|
</p>
|
|
|
|
<div className="flex-1 overflow-auto">
|
|
{reportType === 'servicer' && (
|
|
loadingManualEntries ? (
|
|
<p className="px-4 py-8 text-center text-sm text-text-muted">Ucitam dnevne unose...</p>
|
|
) : (
|
|
<table className="w-full min-w-[980px] border-collapse text-[11px]">
|
|
<thead>
|
|
<tr className="bg-canvas-deep">
|
|
{SERVICER_HEADERS.map((header) => (
|
|
<th key={header} className="border border-border-hairline px-2 py-1.5 text-left font-semibold text-text-muted whitespace-nowrap">
|
|
{header}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{servicerRows.map((row, index) => (
|
|
<tr
|
|
key={row.key}
|
|
onClick={() => handleServicerRowClick(row)}
|
|
className={[
|
|
index % 2 === 0 ? 'bg-canvas-base' : 'bg-canvas-deep',
|
|
row.clickable ? 'cursor-pointer hover:bg-indigo-50' : '',
|
|
].join(' ')}
|
|
title={row.clickable ? 'Klikni za unos ili izmjenu dana bez putnog naloga.' : undefined}
|
|
>
|
|
{row.cells.map((cell, cellIndex) => (
|
|
<td key={`${row.key}-${cellIndex}`} className="border border-border-hairline px-2 py-1 text-text-main whitespace-nowrap">
|
|
{cell}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)
|
|
)}
|
|
|
|
{reportType === 'costs' && (
|
|
loadingCostInvoices ? (
|
|
<p className="px-4 py-8 text-center text-sm text-text-muted">Ucitam troskove...</p>
|
|
) : costsRows.length === 0 ? (
|
|
<p className="px-4 py-8 text-center text-sm text-text-muted">
|
|
Nema troskova za {MONTH_NAMES[viewMonth]} {viewYear}.
|
|
</p>
|
|
) : (
|
|
<table className="w-full min-w-[640px] border-collapse text-[11px]">
|
|
<thead>
|
|
<tr className="bg-canvas-deep">
|
|
{COST_HEADERS.map((header) => (
|
|
<th key={header} className="border border-border-hairline px-2 py-1.5 text-left font-semibold text-text-muted whitespace-nowrap">
|
|
{header}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{costsRows.map((row, index) => (
|
|
<tr key={`${row[0]}-${row[1]}-${index}`} className={index % 2 === 0 ? 'bg-canvas-base' : 'bg-canvas-deep'}>
|
|
{row.map((cell, cellIndex) => (
|
|
<td key={cellIndex} className="border border-border-hairline px-2 py-1 text-text-main whitespace-nowrap">
|
|
{cell}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{manualEntryTarget && (
|
|
<div className="absolute inset-0 z-10 flex items-center justify-center bg-black/20">
|
|
<div className="w-full max-w-sm rounded-xl border border-border-hairline bg-canvas-elevated p-4 shadow-2xl">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-text-main">
|
|
{manualEntryDraft ? 'Unos radnog dana' : 'Odaberi vrstu unosa'}
|
|
</h3>
|
|
<p className="mt-1 text-xs text-text-muted">
|
|
{formatDateFromKey(manualEntryTarget.key)} nema putni nalog. Odaberi status dana.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setManualEntryTarget(null);
|
|
setManualEntryDraft(null);
|
|
setManualEntryError('');
|
|
}}
|
|
className="rounded p-1 text-text-muted hover:bg-canvas-deep"
|
|
aria-label="Zatvori"
|
|
>
|
|
x
|
|
</button>
|
|
</div>
|
|
|
|
{!manualEntryDraft ? (
|
|
<div className="mt-4 grid gap-2">
|
|
<button
|
|
type="button"
|
|
disabled={savingManualEntry}
|
|
onClick={() => startManualEntry('office')}
|
|
className="rounded-lg border border-border-hairline px-3 py-2 text-left text-sm hover:bg-indigo-50"
|
|
>
|
|
<span className="block font-medium text-text-main">Rad u uredu</span>
|
|
<span className="block text-xs text-text-muted">08:00 - 16:00, 8h, Zagreb (ured)</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={savingManualEntry}
|
|
onClick={() => startManualEntry('sick_leave')}
|
|
className="rounded-lg border border-border-hairline px-3 py-2 text-left text-sm hover:bg-indigo-50"
|
|
>
|
|
<span className="block font-medium text-text-main">Bolovanje</span>
|
|
<span className="block text-xs text-text-muted">Unesi vrijeme po potrebi</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={savingManualEntry}
|
|
onClick={() => startManualEntry('vacation')}
|
|
className="rounded-lg border border-border-hairline px-3 py-2 text-left text-sm hover:bg-indigo-50"
|
|
>
|
|
<span className="block font-medium text-text-main">Godisnji</span>
|
|
<span className="block text-xs text-text-muted">Unesi vrijeme po potrebi</span>
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="mt-4 space-y-3">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-text-muted">Početak rada</span>
|
|
<input
|
|
type="time"
|
|
value={manualEntryDraft.startTime}
|
|
onChange={(event) => setManualEntryDraft((prev) => ({ ...prev, startTime: event.target.value }))}
|
|
className="w-full rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-sm text-text-main"
|
|
/>
|
|
</label>
|
|
<label className="block">
|
|
<span className="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-text-muted">Kraj rada</span>
|
|
<input
|
|
type="time"
|
|
value={manualEntryDraft.endTime}
|
|
onChange={(event) => setManualEntryDraft((prev) => ({ ...prev, endTime: event.target.value }))}
|
|
className="w-full rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-sm text-text-main"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div className="rounded-lg bg-canvas-deep px-3 py-2 text-xs text-text-muted">
|
|
Redovan rad (h): {calculateHours(manualEntryDraft.startTime, manualEntryDraft.endTime) || '0'}
|
|
</div>
|
|
{manualEntryError && (
|
|
<p className="text-xs text-red-600">{manualEntryError}</p>
|
|
)}
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
disabled={savingManualEntry}
|
|
onClick={() => {
|
|
setManualEntryDraft(null);
|
|
setManualEntryError('');
|
|
}}
|
|
className="flex-1 rounded-lg border border-border-hairline px-3 py-2 text-sm hover:bg-canvas-deep"
|
|
>
|
|
Nazad
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={savingManualEntry}
|
|
onClick={handleSaveManualEntry}
|
|
className="flex-1 rounded-lg bg-indigo-600 px-3 py-2 text-sm text-white hover:bg-indigo-700 disabled:opacity-60"
|
|
>
|
|
{savingManualEntry ? 'Spremam...' : 'Spremi'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{bulkDownloadOpen && reportType === 'servicer' && (
|
|
<div className="absolute inset-0 z-20 flex items-center justify-center bg-black/30 px-4">
|
|
<div className="w-full max-w-md rounded-xl border border-border-hairline bg-canvas-elevated p-4 shadow-2xl">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-text-main">Preuzmi ZIP arhivu</h3>
|
|
<p className="mt-1 text-xs text-text-muted">
|
|
{MONTH_NAMES[viewMonth]} {viewYear}
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setBulkDownloadOpen(false)}
|
|
className="rounded p-1 text-text-muted hover:bg-canvas-deep"
|
|
aria-label="Zatvori"
|
|
>
|
|
x
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-4 grid gap-2">
|
|
<button
|
|
type="button"
|
|
disabled={downloadingAllTasks || downloadingAllWorkOrders}
|
|
onClick={handleDownloadAllTasksArchive}
|
|
className="rounded-lg border border-border-hairline px-3 py-2 text-left text-sm hover:bg-indigo-50 disabled:opacity-60"
|
|
>
|
|
{downloadingAllTasks ? 'Generiranje...' : 'Servisni taskovi (SN)'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={downloadingAllTasks || downloadingAllWorkOrders}
|
|
onClick={handleDownloadAllWorkOrdersArchive}
|
|
className="rounded-lg border border-border-hairline px-3 py-2 text-left text-sm hover:bg-indigo-50 disabled:opacity-60"
|
|
>
|
|
{downloadingAllWorkOrders ? 'Generiranje...' : 'Putni nalozi + računi (PN)'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</LeftSlideDrawer>
|
|
);
|
|
}
|