feat: dodaj mjesecni izvjestaj servisera i troskova u kalendar widget
- Dva nova Django API endpointa (GET /api/fleet/reports/monthly-servicer/ i /api/fleet/reports/monthly-costs/) koji generiraju DOCX u A4 landscape formatu - TaskCalendarWidget prosiren s report panelom: dva gumba iznad kalendara (Izvjestaj servisera / Izvjestaj troskova) sirenjem drawer-a na 680 px - Preview tablice s podacima iz postojeceg tasks/workOrders store-a - downloadMonthlyServiserReport i downloadMonthlyCostsReport u store-u - TaskCalendarPortal prosljeduje activeWorkOrders prop widgetu Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
mariomitte
@@ -3,6 +3,7 @@ from django.urls import path
|
||||
from .views import (
|
||||
CraneViewSet, VehicleViewSet, WorkOrderViewSet, VehicleServiceRecordViewSet,
|
||||
WorkOrderInvoiceViewSet, ServiceContextNoteViewSet, VehicleNotificationViewSet, VehicleServicePhotoViewSet, VehicleServiceAttachmentViewSet, pusher_auth,
|
||||
monthly_servicer_report_docx, monthly_costs_report_docx,
|
||||
)
|
||||
|
||||
router = DefaultRouter()
|
||||
@@ -20,4 +21,6 @@ urlpatterns = router.urls
|
||||
|
||||
urlpatterns += [
|
||||
path('pusher-auth/', pusher_auth, name='pusher-auth'),
|
||||
path('reports/monthly-servicer/', monthly_servicer_report_docx, name='monthly-servicer-report'),
|
||||
path('reports/monthly-costs/', monthly_costs_report_docx, name='monthly-costs-report'),
|
||||
]
|
||||
@@ -2108,6 +2108,254 @@ def _dispatch_work_order_email_background(task_kwargs):
|
||||
return 'thread'
|
||||
|
||||
|
||||
_MONTH_NAMES_HR = [
|
||||
'Siječanj', 'Veljača', 'Ožujak', 'Travanj', 'Svibanj', 'Lipanj',
|
||||
'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac',
|
||||
]
|
||||
|
||||
|
||||
@api_view(['GET'])
|
||||
@permission_classes([permissions.IsAuthenticated])
|
||||
def monthly_servicer_report_docx(request):
|
||||
"""Download monthly servicer report as DOCX (landscape table)."""
|
||||
from datetime import date as _dt_date
|
||||
try:
|
||||
year = int(request.query_params.get('year', _dt_date.today().year))
|
||||
month = int(request.query_params.get('month', _dt_date.today().month))
|
||||
if not (1 <= month <= 12):
|
||||
raise ValueError()
|
||||
except (ValueError, TypeError):
|
||||
return Response({'detail': 'Nevažeći year/month parametar.'}, status=400)
|
||||
|
||||
try:
|
||||
from modules.task_management.models import Task as _TaskModel
|
||||
except ImportError:
|
||||
return Response({'detail': 'Task model nije dostupan.'}, status=500)
|
||||
|
||||
tasks_qs = (
|
||||
_TaskModel.objects
|
||||
.filter(
|
||||
assigned_to=request.user,
|
||||
is_active=True,
|
||||
scheduled_date__year=year,
|
||||
scheduled_date__month=month,
|
||||
)
|
||||
.select_related('work_order', 'work_order__vehicle', 'work_order__vehicle__client')
|
||||
.order_by('scheduled_date', 'created_at')
|
||||
)
|
||||
|
||||
rows = []
|
||||
for task in tasks_qs:
|
||||
wo = task.work_order
|
||||
datum = task.scheduled_date.strftime('%d.%m.%Y') if task.scheduled_date else '-'
|
||||
opis_posla = task.title or '-'
|
||||
br_dizalice = '-'
|
||||
komitent = '-'
|
||||
mjesto_rada = '-'
|
||||
pocetak_rada = '-'
|
||||
kraj_rada = '-'
|
||||
redovan_rad = '-'
|
||||
prekovremeni = '0'
|
||||
radni_nalog = '-'
|
||||
|
||||
if wo:
|
||||
vehicle = getattr(wo, 'vehicle', None)
|
||||
if vehicle:
|
||||
sn = str(getattr(vehicle, 'crane_serial_number', '') or '').strip()
|
||||
br_dizalice = sn or '-'
|
||||
client_obj = getattr(vehicle, 'client', None)
|
||||
komitent = str(getattr(client_obj, 'name', '') or '').strip() or '-'
|
||||
mjesto_rada = wo.location or '-'
|
||||
ts = wo.travel_start_at
|
||||
te = wo.travel_end_at
|
||||
if ts:
|
||||
pocetak_rada = timezone.localtime(ts).strftime('%H:%M')
|
||||
if te:
|
||||
kraj_rada = timezone.localtime(te).strftime('%H:%M')
|
||||
if ts and te and te > ts:
|
||||
delta_h = (te - ts).total_seconds() / 3600.0
|
||||
reg = min(delta_h, 8.0)
|
||||
ovt = max(0.0, delta_h - 8.0)
|
||||
redovan_rad = f"{reg:.2f}".rstrip('0').rstrip('.')
|
||||
prekovremeni = f"{ovt:.2f}".rstrip('0').rstrip('.') if ovt > 0 else '0'
|
||||
radni_nalog = str(wo.display_code or '').strip() or '-'
|
||||
|
||||
rows.append([datum, opis_posla, br_dizalice, komitent, mjesto_rada,
|
||||
pocetak_rada, kraj_rada, redovan_rad, prekovremeni, radni_nalog])
|
||||
|
||||
from docx import Document as _DocxDoc
|
||||
from docx.shared import Pt, Cm
|
||||
from docx.enum.text import WD_ALIGN_PARAGRAPH
|
||||
from docx.enum.section import WD_ORIENT
|
||||
|
||||
doc = _DocxDoc()
|
||||
for section in doc.sections:
|
||||
section.orientation = WD_ORIENT.LANDSCAPE
|
||||
section.page_width = Cm(29.7)
|
||||
section.page_height = Cm(21.0)
|
||||
section.left_margin = Cm(1.5)
|
||||
section.right_margin = Cm(1.5)
|
||||
section.top_margin = Cm(1.5)
|
||||
section.bottom_margin = Cm(1.5)
|
||||
|
||||
month_label = _MONTH_NAMES_HR[month - 1]
|
||||
servicer_name = _user_display_name(request.user) or getattr(request.user, 'username', str(request.user))
|
||||
|
||||
p_title = doc.add_paragraph()
|
||||
p_title.alignment = WD_ALIGN_PARAGRAPH.CENTER
|
||||
r_title = p_title.add_run('MJESEČNI IZVJEŠTAJ SERVISERA')
|
||||
r_title.bold = True
|
||||
r_title.font.size = Pt(14)
|
||||
|
||||
p_sub = doc.add_paragraph()
|
||||
p_sub.alignment = WD_ALIGN_PARAGRAPH.CENTER
|
||||
r_sub = p_sub.add_run(f"{servicer_name} — {month_label} {year}")
|
||||
r_sub.font.size = Pt(11)
|
||||
|
||||
headers = ['DATUM', 'OPIS POSLA', 'BR. DIZALICE', 'KOMITENT', 'MJESTO RADA',
|
||||
'POČETAK RADA', 'KRAJ RADA', 'REDOVAN RAD (h)', 'PREKOVREMENI (h)', 'RADNI NALOG']
|
||||
col_widths = [Cm(2.2), Cm(5.5), Cm(2.5), Cm(3.5), Cm(3.5),
|
||||
Cm(2.2), Cm(2.2), Cm(2.4), Cm(2.4), Cm(2.4)]
|
||||
|
||||
table = doc.add_table(rows=1 + len(rows), cols=len(headers))
|
||||
table.style = 'Table Grid'
|
||||
|
||||
hdr_cells = table.rows[0].cells
|
||||
for i, (hdr, w) in enumerate(zip(headers, col_widths)):
|
||||
hdr_cells[i].width = w
|
||||
hdr_cells[i].text = hdr
|
||||
if hdr_cells[i].paragraphs[0].runs:
|
||||
run_h = hdr_cells[i].paragraphs[0].runs[0]
|
||||
run_h.bold = True
|
||||
run_h.font.size = Pt(8)
|
||||
|
||||
for ri, row_data in enumerate(rows):
|
||||
data_cells = table.rows[ri + 1].cells
|
||||
for ci, (val, w) in enumerate(zip(row_data, col_widths)):
|
||||
data_cells[ci].width = w
|
||||
data_cells[ci].text = str(val)
|
||||
if data_cells[ci].paragraphs[0].runs:
|
||||
data_cells[ci].paragraphs[0].runs[0].font.size = Pt(8)
|
||||
|
||||
buf = BytesIO()
|
||||
doc.save(buf)
|
||||
buf.seek(0)
|
||||
|
||||
month_key = f"{year}-{month:02d}"
|
||||
safe_name = re.sub(r'[^\w\-]', '_', servicer_name)
|
||||
fname = f"{safe_name}.izvjestaj-servisera.{month_key}.docx"
|
||||
resp = HttpResponse(
|
||||
buf.read(),
|
||||
content_type='application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
)
|
||||
resp['Content-Disposition'] = f'attachment; filename="{fname}"'
|
||||
return resp
|
||||
|
||||
|
||||
@api_view(['GET'])
|
||||
@permission_classes([permissions.IsAuthenticated])
|
||||
def monthly_costs_report_docx(request):
|
||||
"""Download monthly servicer costs (invoices) report as DOCX."""
|
||||
from datetime import date as _dt_date
|
||||
try:
|
||||
year = int(request.query_params.get('year', _dt_date.today().year))
|
||||
month = int(request.query_params.get('month', _dt_date.today().month))
|
||||
if not (1 <= month <= 12):
|
||||
raise ValueError()
|
||||
except (ValueError, TypeError):
|
||||
return Response({'detail': 'Nevažeći year/month parametar.'}, status=400)
|
||||
|
||||
invoices_qs = (
|
||||
WorkOrderInvoice.objects
|
||||
.filter(
|
||||
work_order__work_order_tasks__assigned_to=request.user,
|
||||
work_order__work_order_tasks__is_active=True,
|
||||
datum__year=year,
|
||||
datum__month=month,
|
||||
)
|
||||
.select_related('work_order')
|
||||
.distinct()
|
||||
.order_by('datum', 'naziv_racuna')
|
||||
)
|
||||
|
||||
rows = []
|
||||
for inv in invoices_qs:
|
||||
wo = inv.work_order
|
||||
rows.append([
|
||||
inv.datum.strftime('%d.%m.%Y') if inv.datum else '-',
|
||||
inv.naziv_racuna or '-',
|
||||
inv.lokacija or '-',
|
||||
inv.opis or '-',
|
||||
str(getattr(wo, 'display_code', '') or '').strip() or '-',
|
||||
])
|
||||
|
||||
from docx import Document as _DocxDoc
|
||||
from docx.shared import Pt, Cm
|
||||
from docx.enum.text import WD_ALIGN_PARAGRAPH
|
||||
from docx.enum.section import WD_ORIENT
|
||||
|
||||
doc = _DocxDoc()
|
||||
for section in doc.sections:
|
||||
section.orientation = WD_ORIENT.LANDSCAPE
|
||||
section.page_width = Cm(29.7)
|
||||
section.page_height = Cm(21.0)
|
||||
section.left_margin = Cm(1.5)
|
||||
section.right_margin = Cm(1.5)
|
||||
section.top_margin = Cm(1.5)
|
||||
section.bottom_margin = Cm(1.5)
|
||||
|
||||
month_label = _MONTH_NAMES_HR[month - 1]
|
||||
servicer_name = _user_display_name(request.user) or getattr(request.user, 'username', str(request.user))
|
||||
|
||||
p_title = doc.add_paragraph()
|
||||
p_title.alignment = WD_ALIGN_PARAGRAPH.CENTER
|
||||
r_title = p_title.add_run('MJESEČNI IZVJEŠTAJ TROŠKOVA SERVISERA')
|
||||
r_title.bold = True
|
||||
r_title.font.size = Pt(14)
|
||||
|
||||
p_sub = doc.add_paragraph()
|
||||
p_sub.alignment = WD_ALIGN_PARAGRAPH.CENTER
|
||||
r_sub = p_sub.add_run(f"{servicer_name} — {month_label} {year}")
|
||||
r_sub.font.size = Pt(11)
|
||||
|
||||
headers = ['DATUM', 'NAZIV RAČUNA', 'LOKACIJA', 'OPIS', 'RADNI NALOG']
|
||||
col_widths = [Cm(2.5), Cm(6.0), Cm(4.0), Cm(8.0), Cm(3.0)]
|
||||
|
||||
table = doc.add_table(rows=1 + len(rows), cols=len(headers))
|
||||
table.style = 'Table Grid'
|
||||
|
||||
hdr_cells = table.rows[0].cells
|
||||
for i, (hdr, w) in enumerate(zip(headers, col_widths)):
|
||||
hdr_cells[i].width = w
|
||||
hdr_cells[i].text = hdr
|
||||
if hdr_cells[i].paragraphs[0].runs:
|
||||
run_h = hdr_cells[i].paragraphs[0].runs[0]
|
||||
run_h.bold = True
|
||||
run_h.font.size = Pt(9)
|
||||
|
||||
for ri, row_data in enumerate(rows):
|
||||
data_cells = table.rows[ri + 1].cells
|
||||
for ci, (val, w) in enumerate(zip(row_data, col_widths)):
|
||||
data_cells[ci].width = w
|
||||
data_cells[ci].text = str(val)
|
||||
if data_cells[ci].paragraphs[0].runs:
|
||||
data_cells[ci].paragraphs[0].runs[0].font.size = Pt(9)
|
||||
|
||||
buf = BytesIO()
|
||||
doc.save(buf)
|
||||
buf.seek(0)
|
||||
|
||||
month_key = f"{year}-{month:02d}"
|
||||
safe_name = re.sub(r'[^\w\-]', '_', servicer_name)
|
||||
fname = f"{safe_name}.troskovi-servisera.{month_key}.docx"
|
||||
resp = HttpResponse(
|
||||
buf.read(),
|
||||
content_type='application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
)
|
||||
resp['Content-Disposition'] = f'attachment; filename="{fname}"'
|
||||
return resp
|
||||
|
||||
|
||||
@api_view(['POST'])
|
||||
@permission_classes([permissions.IsAuthenticated])
|
||||
def pusher_auth(request):
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { useMemo, useState } from 'preact/hooks';
|
||||
import { useMemo, useState } from 'preact/hooks';
|
||||
import { getStatusLabel } from '../../stores/taskStore';
|
||||
import { downloadMonthlyServiserReport, downloadMonthlyCostsReport } from '../../stores/fleetDashboardStore';
|
||||
import LeftSlideDrawer from '../layout/LeftSlideDrawer';
|
||||
import { getTaskCraneKind, getTaskCraneOwner, getTaskCraneSerial } from '../../lib/taskCraneDisplay';
|
||||
|
||||
const WEEKDAY_LABELS = ['Po', 'Ut', 'Sr', 'Če', 'Pe', 'Su', 'Ne'];
|
||||
const WEEKDAY_LABELS = ['Po', 'Ut', 'Sr', 'ÄŚe', 'Pe', 'Su', 'Ne'];
|
||||
const MONTH_NAMES = [
|
||||
'Siječanj', 'Veljača', 'Ožujak', 'Travanj', 'Svibanj', 'Lipanj',
|
||||
'SijeÄŤanj', 'VeljaÄŤa', 'OĹľujak', 'Travanj', 'Svibanj', 'Lipanj',
|
||||
'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac',
|
||||
];
|
||||
function toIsoDateKey(dateStr) {
|
||||
@@ -19,12 +20,25 @@ function formatDayLabel(year, month, day) {
|
||||
return `${String(day).padStart(2, '0')}.${String(month + 1).padStart(2, '0')}.${year}`;
|
||||
}
|
||||
|
||||
export default function TaskCalendarWidget({ tasks = [], notes = [], onTaskClick }) {
|
||||
function formatTime(isoStr) {
|
||||
if (!isoStr) return '-';
|
||||
const d = new Date(isoStr);
|
||||
if (Number.isNaN(d.getTime())) return '-';
|
||||
return d.toLocaleTimeString('hr-HR', { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
const SERVICER_HEADERS = ['DATUM', 'OPIS POSLA', 'BR. DIZALICE', 'KOMITENT', 'MJESTO RADA', 'POÄŚETAK', 'KRAJ', 'REDOVAN (h)', 'PREKOVR. (h)', 'RADNI NALOG'];
|
||||
|
||||
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); // 'servicer' | 'costs' | null
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
|
||||
const reportOpen = reportType !== null;
|
||||
const panelWidth = reportOpen ? 680 : 300;
|
||||
|
||||
// Map: "YYYY-MM-DD" -> task[]
|
||||
const tasksByDate = useMemo(() => {
|
||||
const map = {};
|
||||
for (const task of tasks) {
|
||||
@@ -47,11 +61,10 @@ export default function TaskCalendarWidget({ tasks = [], notes = [], onTaskClick
|
||||
return map;
|
||||
}, [notes]);
|
||||
|
||||
// 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
|
||||
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++) cells.push(null);
|
||||
@@ -59,6 +72,74 @@ export default function TaskCalendarWidget({ tasks = [], notes = [], onTaskClick
|
||||
return cells;
|
||||
}, [viewYear, viewMonth]);
|
||||
|
||||
// Rows for servicer report preview table (current month tasks)
|
||||
const servicerRows = useMemo(() => {
|
||||
if (reportType !== 'servicer') return [];
|
||||
return tasks
|
||||
.filter((t) => {
|
||||
const d = t.scheduled_date ? new Date(t.scheduled_date) : null;
|
||||
return d && !Number.isNaN(d.getTime()) && d.getFullYear() === viewYear && d.getMonth() === viewMonth;
|
||||
})
|
||||
.sort((a, b) => (a.scheduled_date || '').localeCompare(b.scheduled_date || ''))
|
||||
.map((task) => {
|
||||
const wo = workOrders.find((w) => String(w.id) === String(task.work_order));
|
||||
let start = '-', end = '-', regular = '-', overtime = '0';
|
||||
if (wo?.travel_start_at) start = formatTime(wo.travel_start_at);
|
||||
if (wo?.travel_end_at) end = formatTime(wo.travel_end_at);
|
||||
if (wo?.travel_start_at && wo?.travel_end_at) {
|
||||
const deltaH = (new Date(wo.travel_end_at) - new Date(wo.travel_start_at)) / 3_600_000;
|
||||
if (deltaH > 0) {
|
||||
const reg = Math.min(deltaH, 8);
|
||||
const ovt = Math.max(0, deltaH - 8);
|
||||
regular = reg % 1 === 0 ? String(reg) : reg.toFixed(2);
|
||||
overtime = ovt > 0 ? (ovt % 1 === 0 ? String(ovt) : ovt.toFixed(2)) : '0';
|
||||
}
|
||||
}
|
||||
const datum = task.scheduled_date
|
||||
? new Date(task.scheduled_date).toLocaleDateString('hr-HR')
|
||||
: '-';
|
||||
return [
|
||||
datum,
|
||||
task.title || '-',
|
||||
getTaskCraneSerial(task),
|
||||
getTaskCraneOwner(task),
|
||||
wo?.location || '-',
|
||||
start,
|
||||
end,
|
||||
regular,
|
||||
overtime,
|
||||
task.work_order_label || '-',
|
||||
];
|
||||
});
|
||||
}, [reportType, tasks, workOrders, viewYear, viewMonth]);
|
||||
|
||||
// Costs report rows: aggregate invoices from work orders linked to tasks in current month
|
||||
const costsRows = useMemo(() => {
|
||||
if (reportType !== 'costs') return [];
|
||||
// Collect work order IDs from tasks in current month
|
||||
const woIds = new Set(
|
||||
tasks
|
||||
.filter((t) => {
|
||||
const d = t.scheduled_date ? new Date(t.scheduled_date) : null;
|
||||
return d && !Number.isNaN(d.getTime()) && d.getFullYear() === viewYear && d.getMonth() === viewMonth && t.work_order;
|
||||
})
|
||||
.map((t) => String(t.work_order))
|
||||
);
|
||||
// Filter work orders with invoices
|
||||
return workOrders
|
||||
.filter((wo) => woIds.has(String(wo.id)) && Array.isArray(wo.invoices) && wo.invoices.length > 0)
|
||||
.flatMap((wo) =>
|
||||
wo.invoices.map((inv) => [
|
||||
inv.datum ? new Date(inv.datum).toLocaleDateString('hr-HR') : '-',
|
||||
inv.naziv_racuna || '-',
|
||||
inv.lokacija || '-',
|
||||
inv.opis || '-',
|
||||
wo.display_code || '-',
|
||||
])
|
||||
)
|
||||
.sort((a, b) => (a[0] || '').localeCompare(b[0] || ''));
|
||||
}, [reportType, tasks, workOrders, viewYear, viewMonth]);
|
||||
|
||||
const selectedDayKey = selectedDay
|
||||
? `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(selectedDay).padStart(2, '0')}`
|
||||
: null;
|
||||
@@ -86,199 +167,336 @@ export default function TaskCalendarWidget({ tasks = [], notes = [], onTaskClick
|
||||
closePanel?.();
|
||||
}
|
||||
|
||||
function toggleReport(type) {
|
||||
setReportType((prev) => (prev === type ? null : type));
|
||||
}
|
||||
|
||||
async function handleDownload() {
|
||||
if (downloading) return;
|
||||
setDownloading(true);
|
||||
try {
|
||||
if (reportType === 'servicer') {
|
||||
await downloadMonthlyServiserReport(viewYear, viewMonth + 1);
|
||||
} else {
|
||||
await downloadMonthlyCostsReport(viewYear, viewMonth + 1);
|
||||
}
|
||||
} finally {
|
||||
setDownloading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const totalScheduled = Object.values(tasksByDate).flat().length;
|
||||
const totalNoteReminders = Object.values(notesByDate).flat().length;
|
||||
|
||||
return (
|
||||
<LeftSlideDrawer
|
||||
drawerId="calendar"
|
||||
title="📅 Kalendar zadataka"
|
||||
tabLabel="📅 Kalendar"
|
||||
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="flex flex-1 min-h-0 overflow-hidden">
|
||||
|
||||
{/* 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"
|
||||
{/* ── Calendar column (fixed 300 px) ── */}
|
||||
<div
|
||||
className="flex w-[300px] flex-shrink-0 flex-col overflow-hidden"
|
||||
style={reportOpen ? { borderRight: '1px solid var(--color-border-hairline, #e5e7eb)' } : {}}
|
||||
>
|
||||
◀
|
||||
</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>
|
||||
{/* Report toggle buttons */}
|
||||
<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 izradu mjesečnog izvještaja servisera"
|
||||
>
|
||||
📊 Izvještaj 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 izradu mjesečnog izvještaja troškova"
|
||||
>
|
||||
💰 Izvještaj troškova
|
||||
</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}
|
||||
{/* 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>
|
||||
<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} bilješki`
|
||||
: 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(' ')}
|
||||
/>
|
||||
<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} bilješki` : 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>
|
||||
)}
|
||||
{hasNotes && (
|
||||
<span
|
||||
className={[
|
||||
'h-1.5 w-1.5 rounded-full',
|
||||
isSelected ? 'bg-violet-200' : 'bg-violet-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 && selectedDayNotes.length === 0 ? (
|
||||
<p className="text-sm text-text-muted">Nema događaja 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">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>
|
||||
)}
|
||||
</span>
|
||||
{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>
|
||||
<span className="mt-0.5 block text-[11px] text-text-muted">
|
||||
{getTaskCraneSerial(task)} • {getTaskCraneKind(task)} • {getTaskCraneOwner(task)}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</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 && selectedDayNotes.length === 0 ? (
|
||||
<p className="text-sm text-text-muted">Nema događaja 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">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>
|
||||
<>
|
||||
<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>
|
||||
)}
|
||||
{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>
|
||||
<span className="mt-0.5 block text-[11px] text-text-muted">
|
||||
{getTaskCraneSerial(task)} • {getTaskCraneKind(task)} • {getTaskCraneOwner(task)}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{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.
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Report panel (visible when reportType is set) ── */}
|
||||
{reportOpen && (
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
{/* Report header */}
|
||||
<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' ? '📊 Izvještaj servisera' : '💰 Izvještaj troškova'}
|
||||
</span>
|
||||
<span className="ml-2 text-xs text-text-muted">
|
||||
{MONTH_NAMES[viewMonth]} {viewYear}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xs text-text-muted">
|
||||
Odaberite datum u kalendaru za prikaz zadataka.
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => downloadMonthlyServiserReport && handleDownload()}
|
||||
disabled={downloading}
|
||||
className="flex items-center gap-1.5 rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700 disabled:opacity-60"
|
||||
>
|
||||
{downloading ? '⏳' : '📥'} Preuzmi DOCX
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Report info note */}
|
||||
<p className="border-b border-border-hairline bg-canvas-deep px-4 py-1.5 text-[11px] text-text-muted">
|
||||
{reportType === 'servicer'
|
||||
? 'Pregled podataka za odabrani mjesec. Preuzmi DOCX za točan i formatiran izvještaj.'
|
||||
: 'Pregled troškova za odabrani mjesec iz putnih naloga. Preuzmi DOCX za točan izvještaj.'
|
||||
}
|
||||
</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} bilješki/podsjetnika u kalendaru.
|
||||
</p>
|
||||
)}
|
||||
{totalScheduled === 0 && (
|
||||
<p className="mt-1.5 text-[11px] text-text-muted">
|
||||
Nijedan zadatak nema postavljen planirani datum.
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
|
||||
{/* Table */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{reportType === 'servicer' && (
|
||||
servicerRows.length === 0 ? (
|
||||
<p className="px-4 py-8 text-center text-sm text-text-muted">
|
||||
Nema zadataka za {MONTH_NAMES[viewMonth]} {viewYear}.
|
||||
</p>
|
||||
) : (
|
||||
<table className="w-full min-w-[580px] border-collapse text-[11px]">
|
||||
<thead>
|
||||
<tr className="bg-canvas-deep">
|
||||
{SERVICER_HEADERS.map((h) => (
|
||||
<th key={h} className="border border-border-hairline px-2 py-1.5 text-left font-semibold text-text-muted whitespace-nowrap">
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{servicerRows.map((row, i) => (
|
||||
<tr key={i} className={i % 2 === 0 ? 'bg-canvas-base' : 'bg-canvas-deep'}>
|
||||
{row.map((cell, j) => (
|
||||
<td key={j} className="border border-border-hairline px-2 py-1 text-text-main whitespace-nowrap">
|
||||
{cell}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
)}
|
||||
{reportType === 'costs' && (
|
||||
costsRows.length === 0 ? (
|
||||
<p className="px-4 py-8 text-center text-sm text-text-muted">
|
||||
Nema troškova za {MONTH_NAMES[viewMonth]} {viewYear}.
|
||||
<br />
|
||||
<span className="text-[11px]">Napomena: prikaz ovisi o dostupnim podacima raÄŤuna u putnim nalozima.</span>
|
||||
</p>
|
||||
) : (
|
||||
<table className="w-full min-w-[400px] border-collapse text-[11px]">
|
||||
<thead>
|
||||
<tr className="bg-canvas-deep">
|
||||
{['DATUM', 'NAZIV RAÄŚUNA', 'LOKACIJA', 'OPIS', 'RADNI NALOG'].map((h) => (
|
||||
<th key={h} className="border border-border-hairline px-2 py-1.5 text-left font-semibold text-text-muted whitespace-nowrap">
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{costsRows.map((row, i) => (
|
||||
<tr key={i} className={i % 2 === 0 ? 'bg-canvas-base' : 'bg-canvas-deep'}>
|
||||
{row.map((cell, j) => (
|
||||
<td key={j} className="border border-border-hairline px-2 py-1 text-text-main whitespace-nowrap">
|
||||
{cell}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</LeftSlideDrawer>
|
||||
);
|
||||
|
||||
@@ -103,6 +103,7 @@ export default function TaskCalendarPortal() {
|
||||
<TaskCalendarWidget
|
||||
tasks={tasks}
|
||||
notes={notes}
|
||||
workOrders={activeWorkOrders}
|
||||
onTaskClick={handleTaskClick}
|
||||
/>
|
||||
<ServiceNotesWidget
|
||||
|
||||
@@ -913,6 +913,34 @@ export async function downloadWorkOrderInvoicesDocx(workOrderId) {
|
||||
}
|
||||
}
|
||||
|
||||
export async function downloadMonthlyServiserReport(year, month) {
|
||||
try {
|
||||
const blob = await api.get(
|
||||
`fleet/reports/monthly-servicer/?year=${year}&month=${month}`,
|
||||
{ responseType: 'blob' },
|
||||
);
|
||||
saveBlobToFile(blob, `izvjestaj-servisera-${year}-${String(month).padStart(2, '0')}.docx`);
|
||||
showToast('Izvještaj servisera je preuzet.', 'success');
|
||||
} catch (err) {
|
||||
showToast(err?.message || 'Preuzimanje izvještaja servisera nije uspjelo.', 'error');
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
export async function downloadMonthlyCostsReport(year, month) {
|
||||
try {
|
||||
const blob = await api.get(
|
||||
`fleet/reports/monthly-costs/?year=${year}&month=${month}`,
|
||||
{ responseType: 'blob' },
|
||||
);
|
||||
saveBlobToFile(blob, `troskovi-servisera-${year}-${String(month).padStart(2, '0')}.docx`);
|
||||
showToast('Izvještaj troškova je preuzet.', 'success');
|
||||
} catch (err) {
|
||||
showToast(err?.message || 'Preuzimanje izvještaja troškova nije uspjelo.', 'error');
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
export async function downloadGeneratedPdfByUrl(downloadUrl, filename = 'document.pdf') {
|
||||
if (!downloadUrl) {
|
||||
showToast('Nedostaje URL za preuzimanje PDF-a.', 'error');
|
||||
|
||||
Reference in New Issue
Block a user