Kalendar zauzetosti

Figma Component: https://www.figma.com/design/NWu7ssnTfTJHFNDy13CnUt/Aplikacija-Vento---UI?node-id=2027-6740

GitHub Issue: #182

Last modified with commit 374306c on October 12, 2026 at 6:15 PM by Aljaž.

Monthly calendar of all inventory vehicles, including archived ones (grouped into Vozni park by Namen, and Događaji). It shows blue bars for Vozni park reservations (labeled with Tvrtka and/or Ime i prezime), green bars for events (event name) and grey "Neispravno" from today on for vehicles with that status, based on reservations only, not on pickup/return records. It has "+ NOVA REZERVACIJA", a brand filter, month navigation, a vehicle info tooltip (Šasija, Boja), an empty-cell click that opens a prefilled new reservation, and a reservation menu (Uredi rezervaciju / Otvori zapisnik o preuzimanju / Ukloni rezervaciju) with a delete confirmation modal.

Users with access to Vozni park open the calendar from the side menu: Vozni park → Kalendar zauzetosti. It is the start page of the module.

Page title: “Kalendar zauzetosti”. Breadcrumb: Kalendar zauzetosti.

The calendar shows the booking status of all vehicles from the general inventory (Inventar), whichever area they are designated for. Both Vozni park vehicles and Događaji (Events) vehicles appear on the same calendar.

Archived vehicles are also shown, so that their past reservations stay visible. They cannot be selected for new reservations.

Not specified: how archived vehicles are shown. Recommended: only in months where they have a reservation or an event, with the plate in grey.

“+ NOVA REZERVACIJA” button – opens Adding new reservation with Vozilo and dates empty
Brand filter dropdown, default “SVE MARKE” – filters the calendar by brand
Month navigation: “‹ Prosinac 2025 ›” – the arrows go to the previous and next month

The brand filter (“SVE MARKE”) at the top of the page.

Not specified: which month is shown when the page opens. Recommended: the current month.

Calendar grid

First column: vehicles, with the heading “VOZNI PARK”.
One column per day of the month, labeled with the day number and the weekday (PON, UTO, SRI, ČET, PET, SUB, NED). Saturday and Sunday columns are shaded.
The grid scrolls horizontally when the month does not fit the screen.

Conflict for the assignee to check: Figma has two headings for the first column: “VOZNI PARK” (main calendar frame) and “VOZILO” (delete modal frame). These docs follow the main frame.

Vehicle groups

Vehicles are grouped in two sections. The section is set when the vehicle is added to the inventory (Vrsta korištenja):

Vozni park – further grouped by purpose (Namen), e.g. IT, Postprodaja, Novinarji, Veliki kupci. Each group header shows the group name and the number of vehicles (e.g. “2 vozila”).
Događaji – one group, with the header “DOGAĐAJI”.

Grouping the Vozni park vehicles by Namen, with a vehicle count per group.

The vehicle count uses the correct Croatian form: “1 vozilo”, “2 vozila” … “4 vozila”, “5 vozila”, “21 vozilo”, “22 vozila”. (Figma has the typo “1 vozila”.)

Figma mistakes: the delete modal frame groups vehicles by brand (Audi, Seat, Cupra, VW…), and the main calendar frame repeats two Škoda vehicles in both VELIKI KUPCI and DOGAĐAJI. These docs follow the spec: groups by Namen, and each vehicle appears once. In Figma the Događaji group has no vehicle count. Recommended: show it there too.

Each vehicle row is labeled with brand and model, and the registration plate in grey underneath (e.g. “AUDI A4 Avant” / “ZG-123-AA”).

Bars on the timeline

Blue bar – a Vozni park reservation, spanning the reserved days. The label is the company name, the person’s name, or both (e.g. “Jutranji list”, “Ana Horvat”, “Jutranji list – Ana Horvat”).
Green bar – a period in which the vehicle is added to an event, labeled with the event name (e.g. “Event test drive - new model”).
Grey bar “Neispravno” – based on the vehicle’s current status in the inventory. If the status is Neispravno, the vehicle is shown as Neispravno from today for all future dates. When the status is changed back to Aktivno, the grey bar is no longer shown.

Not specified: are past Neispravno periods shown? The spec talks about “periods” of Neispravno, but only says the vehicle is shown as Neispravno for all future dates, and the status has no history. Recommended: no; once the vehicle is Aktivno again, the past Neispravno period is not shown.

A vehicle marked out of order for a set period with a reservation (e.g. “Odjava”) is shown as a normal blue reservation bar.

Figma mistake: the main calendar frame has the annotation “Car is set as out of order in Vehicles list” on a blue “ODJAVA” bar. Per the spec, “Neispravno” from the inventory is grey, and “Odjava” is an ordinary blue reservation. The Figma frame also fills the whole month with “Neispravno”, including past days.

Not specified: which dates a green event bar spans. Recommended: the event’s start to end date.

Reservations and events of the same vehicle never overlap: a new or changed reservation is rejected if it overlaps another reservation or event of the vehicle (see Adding new reservation).

The grey Neispravno bar doesn’t overlap them either: a vehicle with current or future reservations can’t be set to Neispravno (see Add new vehicle), and a Neispravno vehicle can’t be reserved.

The calendar shows only the reservations. Dates from pickup/return records are not shown. Reservation times and pickup/return times are not connected and can differ. For an accurate calendar, the Manager of Vozni park changes the reservation dates by hand when the actual pickup or return differs from the reservation.

Vehicle info

Figma: https://www.figma.com/design/NWu7ssnTfTJHFNDy13CnUt/Aplikacija-Vento---UI?node-id=2056-8872

Hovering over a vehicle cell shows an info icon (ⓘ). Clicking it opens a tooltip with additional vehicle info:

“Šasija: …” – chassis number
“Boja: …” – color

Conflict for the assignee to check: the spec says hovering over a vehicle shows the tooltip. These docs follow Figma: hovering shows the info icon, and clicking it opens the tooltip.

Figma note: https://www.figma.com/design/NWu7ssnTfTJHFNDy13CnUt/Aplikacija-Vento---UI?node-id=2057-11915

There is no option to remove a vehicle on the calendar. (The Figma note and the delete modal frame show a three-dots menu with “Ukloni vozilo” on the vehicle cell. That is a Figma mistake: the three-dots menu belongs to the reservation bar, and its remove option is “Ukloni rezervaciju”.)

Adding a reservation from the calendar

Clicking an empty cell opens Adding new reservation with Vozilo prefilled from the row and Od from the day that was clicked.

Figma note: https://www.figma.com/design/NWu7ssnTfTJHFNDy13CnUt/Aplikacija-Vento---UI?node-id=2314-12509

Hovering over a reservation bar shows a three-dots icon ("…"). Clicking an existing reservation opens a menu with:

Uredi rezervaciju – opens Editing existing reservation. Past reservations can also be edited.
Otvori zapisnik o preuzimanju – starts a new Zapisnik o preuzimanju, with Registarska oznaka, Tvrtka, Ime i prezime, E-mail or Telefon, and Rok korištenja (Od / Do) copied from the reservation. The record is not linked to the reservation.
Ukloni rezervaciju (red, with a trash icon) – opens the delete confirmation modal

The menu is shown only for blue reservation bars, not for event or Neispravno bars.

Conflict for the assignee to check: the spec says this option opens the reservation’s own handover protocol (“its handover protocol”), and that the Zapisnici list shows protocols “tied to Vozni park reservations”. These docs (and the DB schema) don’t link records to reservations: each click starts a new record with the reservation data copied in, so clicking twice on the same reservation creates two records.

Figma: https://www.figma.com/design/NWu7ssnTfTJHFNDy13CnUt/Aplikacija-Vento---UI?node-id=2059-15950

The modal is the same as the other delete modals in the app:

Red warning icon, title “Ukloni rezervaciju?”, with a subtitle of the reservation’s name, vehicle and registration plate (e.g. “Ivan Horvat · SEAT Ibiza Style · RI-321-DD”)
Text: “Jeste li sigurni da želite ukloniti ovu rezervaciju?”
Buttons:
- Odustani – closes the modal without deleting
- Ukloni (red) – deletes the reservation and removes its bar from the calendar
Close icon (x) in the top right corner – closes the modal without deleting

(The Figma modal subtitle mixes two vehicles: “Ivan Horvat · Seat Ibiza Style VZ · OS-654-EE”, where the plate and “VZ” belong to the Cupra Formentor.)

Deleting a reservation does not affect the Zapisnici: records are not linked to reservations.

Kalendar zauzetosti

Header

Calendar grid

Vehicle groups

Bars on the timeline

Vehicle info

Adding a reservation from the calendar

Reservation menu

Kalendar zauzetosti

Header

Calendar grid

Vehicle groups

Bars on the timeline

Vehicle info

Adding a reservation from the calendar

Reservation menu

Delete confirmation modal